JQuery操作文档之包裹节点

如果要将某个节点用其他标记包裹起来， JQuery 提供了三个方法： wrap() 、 wrapAll() 、 wrapInner(), 这三个方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。

 

1.wrap()方法

 

将所有匹配元素用指定元素来包裹，所不同的是：它会将所有匹配元素进行单独的包裹。如：

 

HTML：

 

<p>Hello</p>

 

<p>Hello</p>

 

JQuery代码：$(“p”).wrap(“<b></b>”);

 

结果：

 

<b><p>Hello</p></b>

 

<b><p>Hello</p></b>

 

2.wrapAll()方法

 

这个方法也是将所有匹配元素用指定元素来包裹，所不同的是：它会将所有匹配元素用一个元素来包裹。如：

 

HTML：

 

<p>Hello</p>

 

<p>Hello</p>

 

JQuery代码：$(“p”).wrapAll(“<b></b>”);

 

结果：

 

<b>

 

<p>Hello</p>

 

<p>Hello</p>

 

</b>

 

3.wrapInner()方法

 

该方法将每一个匹配元素的子内容(包括文本节点)用其他结构化的标记包裹起来。如：

 

HTML：

 

<p>Hello</p>

 

<p>Hello</p>

 

JQuery代码：$(“p”). wrapInner(“<b></b>”);

 

结果：

 

<p><b>Hello</b></p>

 

<p><b>Hello</b></p>