網站制作中的一些交到計設是離不開JavaScript腳本語言的,而javascript中的一個著名的操作DOM對象的插件JQuery可以說是應用范圍最廣一款JS插件之一。今天我們記錄一下,利用JQuery把DOM中某個節點用其它標記包裹起來的例子

將某個節點用其它標簽包裹起來,JQuery中提供了三種方法,即wrap()方法,wrarAll()方法和wrarInner()方法。

jQuery中的wrap()方法使用

jQuery中的wrap() 方法把每個被選元素放置在指定的 HTML 內容或元素中

jQuery中的wrap()方法使用

例子:

HTML代碼

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用DIV包裹P標簽</button>

JQ代碼:

$(".btn1").click(function(){
    $("p").wrap("<div></div>");
});

結果:

我們查看源代碼會變成這樣

<div><p>This is a paragraph.</p></div>
<div><p>This is another paragraph.</p></div>

jQuery中的wrapAll()方法

jQuery中的wrapAll方法會在指定的 HTML 內容或元素中放置所有被選的元素。

jQuery中的wrapAll()方法

例子:

HTML代碼

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用DIV包裹P標簽</button>

jQ代碼:

$(".btn1").click(function(){
    $("p").wrapAll("<div></div>");
 });

結果:

查看源代碼

<div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
</div>

jQ中的wrapInner()方法

国产视频appjQuery中的wrapInner()方法使用指定的 HTML 內容或元素,來包裹每個被選元素中的所有內容 (inner HTML)。

jQ中的wrapInner()方法

例子:

HTML代碼

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用DIV包裹P標簽內容</button>

jQ代碼:

$(".btn1").click(function(){
    $("p").wrapInner("<div></div>");
});

結果:

查看源代碼

<p>
    <div>This is a paragraph.</div>
</p>
<p>
    <div>This is another paragraph.</div>
</p>