How to insert a new div that surrounds existing elements

Question

Given this markup:

<h1>Lorem ipsum!</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Aliquam erat volutpat.</p>

How can I surround two existing paragraphs with a new div using JavaScript?

Desired Result:

<h1>Lorem ipsum!</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<p>Aliquam erat volutpat.</p>
</div>

Answer 1

See this question for a solution using regular JavaScript.

Answer 2

jquery has a method wrapif you use it (and if not, why not :))

Answer 3

wrapAll().

$(".yourPclass").wrapAll("<div/>");

( , jquery *)

Answer 4

https://developer.mozilla.org/en/insertbefore https://developer.mozilla.org/en/appendchild .