JQuery method of inserting DOM nodes_jquery

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

Dynamically creating HTML elements is of no practical use, as the newly created elements need to be inserted into the document. The simplest way to insert a newly created node into a document is to make it a child node of a node in the document. Previously we used a method append() to insert nodes, which will append the newly created content inside the element.

There is not only one way to insert a newly created node into a document. JQuery also provides other ways to insert nodes, as shown in the table below. Readers can flexibly make a variety of choices based on actual needs.

HTML DOM structure is as follows:

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

append()

Append content inside each matching element:

HTML code:

Copy code The code is as follows:

I want to say:

jQuery code:

Copy code The code is as follows:

$("p").append("Hello< /b>");

Result:

Copy code The code is as follows:

I want to say: Hello

appendTo()

Append all matching elements to the specified element. In fact, using this method reverses the regular $(A).append(B) operation, that is, instead of appending B to A, appending A to B:

HTML code:

Copy code The code is as follows:

I want to say:

jQuer code:

Copy code The code is as follows:

$("Hello").appendTo ("p");

Result:

Copy code The code is as follows:

I want to say: Hello

prepend()

Prepend content inside each matching element:

HTML code:

Copy code The code is as follows:

I want to say:

jQuer code:

Copy code The code is as follows:

$("p").prepend<"Hello< /b>");

Result:

Copy code The code is as follows:

Hello I want to say ：

prependTo()

Prepend all matching elements to the specified element. In fact, using this method reverses the regular $(A).prepend(B) operation, that is, instead of prepending B to A, A is prepended to B:

HTML code:

Copy code The code is as follows:

I want to say:

jQuer code:

Copy code The code is as follows:

$("Hello").prependTo ("p");

Result:

Copy code The code is as follows:

Hello I want to say ：

after()

Insert content after each matching element:

HTML code:

Copy code The code is as follows:

I want to say:

jQuer code:

Copy code The code is as follows:

$("p").after("Hello< /b>");

Result:

Copy code The code is as follows:

I want to say:

You Good

insertAfler()

Insert all matching elements after the specified element. In fact, using this method reverses the regular $(A).after(B) operation, that is, instead of inserting B after A, A is inserted after B:

HTML code:

Copy code The code is as follows:

I want to say:

jQuer code:

Copy code The code is as follows:

$("Hello").insertAfter ("p");

Result:

Copy code The code is as follows:

I want to say:

You Good

before()

Insert content before each matching element:

HTML code:

Copy code The code is as follows:

I want to say:

jQuer code:

Copy code The code is as follows:

$("p").before("Hello< /b>");

Result:

Copy code The code is as follows:

Hello

I want to say ：

insertBefore()

Push all matching elements in front of the specified element. In fact, using this method reverses the regular $(A).before(B) operation, that is, instead of inserting B before A, insert A before B:

HTML code:

Copy code The code is as follows:

I want to say:

jQuer code:

Copy code The code is as follows:

$("Hello").insertBefore ("p");

Result:

Copy code The code is as follows:

Hello

I want to say ：

这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作：

$(function(){
  var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
  var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
  var $li_3 = $("<li title='新增节点：计算机算法'>新增节点：计算机算法</li>"); // 创建第三个<li>元素
  var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
  var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  $("#btn_1").click(function(){
    $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
  });
  $("#btn_2").click(function(){
    // 可以采取链式写法：$parent.append($li_1).append($li_2);
    $parent.append($li_2);   
  });
  $("#btn_3").click(function(){
    // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
    $li_3.insertAfter($two_li); 
  });
});

也利用它们对原有的DOM元素进行移动：

$(function(){
  var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
  var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点
  $two_li.insertBefore($one_li); //移动节点
});

希望本文所述对大家的jQuery程序设计有所帮助。