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(" ");

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(" strong>");

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(" strong>");

After running the code, it was found that the content in the tag was wrapped by a pair of

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.