insert given HTML code into a div section with jQuery

Question

I have several HTML code combinations like this:

<h2></h2>
<p></p>
<iframe></iframe>
<hr/>

and from that I want to create such a code with jQuery:

<div id="sample">
<h2></h2>
<p></p>
<iframe></iframe>
</div>
<hr/>

I could just perform these functions:

$('h2').before('<div id="sample">');
$('iframe').after('</div>')

but these functions doesn't insert only given text, it creats new div sections. I need to put particular parts of HTML into one div section with a help of jQuery because my page contains many of these combinations.

possible duplicate of Use jQuery to wrap around groups of elements — j08691
– j08691, Commented Apr 2, 2012 at 16:07

James Allardice · Accepted Answer · 2012-04-02 16:02:47Z

4

You can use nextUntil to select sibling elements up to one matching a selector, and wrapAll to wrap the entire matched set in another element. You need to use andSelf to add the original h2 element back into the matched set:

$("h2").nextUntil("hr").andSelf().wrapAll("<div id='sample'>");

answered Apr 2, 2012 at 16:02

James Allardice

166k22 gold badges335 silver badges315 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

пацан Over a year ago

for some reason it doesn't work - div sections with id=sample aren't created

пацан Over a year ago

but if I perform function $("h2").nextUntil("hr").andSelf().css() it works, what is wrong with that wrapAll

пацан Over a year ago

finally I got everything working, Error Console was showing that at the end of this jQuery code exists illegal character, which I guess was copy-paste fault. Also I don't need wrapAll() but simply wrap() function to create seperated div sections. As more than one similar div sections are needed, id can't be used, so in place of id should be class

пацан · Accepted Answer · 2012-04-03 08:35:12Z

0

$('h2').nextUntil('hr').andSelf().wrap('<div class="sample">');

answered Apr 3, 2012 at 8:35

пацан

1062 silver badges13 bronze badges

Collectives™ on Stack Overflow

insert given HTML code into a div section with jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related