本文實例講述了JQuery包裹DOM節點的方法。分享給大家供大家參考。具體分析如下：
如果要將某個節點用其他標記包裹起來，JQuery提供了相應的方法，即wrap()，該方法對于需要在文檔中插入額外的結構化標記非常有用，而且它不會破壞原始文檔的語義。
wrap()
得到的結果如下：
<strong> <li id="li_1" title="PHP編程">簡單易懂的PHP編程</li></strong>
包裹節點操作還有其他兩個方法，即wrapAll()和wrapInner()。
wrapAll()方法
該方法會將所有匹配的元素用一個元素來包裹。它不同于wrap()方法，wrap()方法是將所有的元素進行單獨的包裹。JQuery代碼如下：
使用wrapAll()方法包裹后的HTML是這樣的：
<strong> <li class="li_2" title="C編程">簡單易懂的C編程</li> <li class="li_2" title="JavaScript編程">簡單易懂的JavaScript編程</li></strong>
wrapInner()方法
該方法將每一個匹配的元素的子內容（包括文本節點）用其他結構化的標記包裹起來。
運行代碼后，發現<strong>標簽內的內容被一對<li>標簽包裹了，結果如下：
<li id="li_4" title="JQuery"> <strong>簡單易懂的JQuery編程</strong></li>
本例的JQuery代碼如下：
<script type="text/javascript">//<![CDATA[$(function(){ $("#btn_1").click(function(){ //用<strong>元素把<li>元素包裹起來 $("#li_1").wrap("<strong></strong>"); }) $("#btn_2").click(function(){ $(".li_2").wrapAll("<strong></strong>"); }) $("#btn_3").click(function(){ $("#li_4").wrapInner("<strong></strong>"); })});//]]></script>希望本文所述對大家的jQuery程序設計有所幫助。
新聞熱點
疑難解答
