How To Insert a New Div Which 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 the two existing paragraphs 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>

Answer 1

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

Answer 2

See this question for a solution using plain JavaScript.

Answer 3

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*)

Answer 4

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