How To Insert a New Div Which Surrounds Existing Elements

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 the two existing 开发者_StackOverflowparagraphs with a new div using JavaScript?

Desired outcome:

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

---

jquery has a wrap method if you are using it (and if not, why not :) )

---

See this question for a solution using plain JavaScript.

---

You should add a class to the paragraph tags and use the wrapAll() function.

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

(This was making an assumption if you were using jquery*)

---

https://developer.mozilla.org/en/insertbefore or https://developer.mozilla.org/en/appendchild if you want to manually do it.