使用jQuery将给定的HTML代码插入div部分

Question

我有几个这样的HTML代码组合：

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

从那里我想用jQuery创建这样的代码：

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

我可以执行这些功能：

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

但这些函数不会仅插入给定的文本，而是创建新的div部分。 我需要在jQuery的帮助下将HTML的特定部分放入一个div部分，因为我的页面包含许多这些组合。

Answer 1

您可以使用nextUntil选择与选择器匹配的兄弟元素，并使用wrapAll将整个匹配的集合包装在另一个元素中。您需要使用andSelf将原始h2元素添加回匹配的集合中：

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

Answer 2

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