JQuery's method of wrapping DOM nodes_jquery

The example in this article describes the method of wrapping DOM nodes with JQuery. Share it with everyone for your reference. The specific analysis is as follows:

If you want to wrap a node with other tags, JQuery provides the corresponding method, wrap(), which is very useful for inserting additional structured tags into the document, and it will not destroy the original document semantics.

wrap()

Copy code The code is as follows:

$("#li_1").wrap("8e99a69fbe029cd4e2b854e244eab143 128dba7a3a77be0113eb0bea6ea0a5d0");

The results obtained are as follows:

<strong>
  <li id="li_1" title="PHP编程">简单易懂的PHP编程</li>
</strong>

There are two other methods for wrapping node operations, namely wrapAll() and wrapInner().

wrapAll() method

This method will wrap all matching elements with one element. It is different from the wrap() method, which wraps all elements individually. The JQuery code is as follows:

Copy code The code is as follows:

$(".li_2").wrapAll("8e99a69fbe029cd4e2b854e244eab1433eca6633a7888701eae35daa62509e18");

The HTML wrapped using the wrapAll() method looks like this:

<strong>
  <li class="li_2" title="C编程">简单易懂的C编程</li>
  <li class="li_2" title="JavaScript编程">简单易懂的JavaScript编程</li>
</strong>

wrapInner() method

This method wraps the sub-content (including text nodes) of each matching element with other structured markup.

Copy code The code is as follows:

$("#li_4").wrapInner("8e99a69fbe029cd4e2b854e244eab1433eca6633a7888701eae35daa62509e18");

After running the code, it was found that the content in the 8e99a69fbe029cd4e2b854e244eab143 tag was wrapped by a pair of 25edfb22a4f469ecb59f1190150159c6 tags. The results are as follows:

<li id="li_4" title="JQuery">
  <strong>简单易懂的JQuery编程</strong>
</li>

The JQuery code for this example is as follows:

<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>

I hope this article will be helpful to everyone’s jQuery programming.