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

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:

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

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

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