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:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuery code:

Copy code The code is as follows:

$("p").append("a4b561c25d9afb9ac8dc4d70affff419Hello07aec8279184d16fedc0638ac18fa96e");

Result:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beeI want to say: a4b561c25d9afb9ac8dc4d70affff419Hello

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:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuer code:

Copy code The code is as follows:

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

Result:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beeI want to say: a4b561c25d9afb9ac8dc4d70affff419Hello

prepend()

Prepend content inside each matching element:

HTML code:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuer code:

Copy code The code is as follows:

$("p").prepend<"a4b561c25d9afb9ac8dc4d70affff419Hello07aec8279184d16fedc0638ac18fa96e");

Result:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a I want to say ：94b3e26ee717c64999d7867364b1b4a3

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:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuer code:

Copy code The code is as follows:

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

Result:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a I want to say ：94b3e26ee717c64999d7867364b1b4a3

after()

Insert content after each matching element:

HTML code:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuer code:

Copy code The code is as follows:

$("p").after("a4b561c25d9afb9ac8dc4d70affff419Hello07aec8279184d16fedc0638ac18fa96e");

Result:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419You Good0d36329ec37a2cc24d42c7229b69747a

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:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuer code:

Copy code The code is as follows:

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

Result:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419You Good0d36329ec37a2cc24d42c7229b69747a

before()

Insert content before each matching element:

HTML code:

Copy code The code is as follows:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuer code:

Copy code The code is as follows:

$("p").before("a4b561c25d9afb9ac8dc4d70affff419Hello07aec8279184d16fedc0638ac18fa96e");

Result:

Copy code The code is as follows:

a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeI want to say ：94b3e26ee717c64999d7867364b1b4a3

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:

e388a4556c0f65e1904146cc1a846beeI want to say:94b3e26ee717c64999d7867364b1b4a3

jQuer code:

Copy code The code is as follows:

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

Result:

Copy code The code is as follows:

a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeI want to say ：94b3e26ee717c64999d7867364b1b4a3

这些插入节点的方法不仅能将新创建的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程序设计有所帮助。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the getUTCMilliseconds() method to manipulate time in JS_Basic knowledgeNext article：How to use the getUTCMilliseconds() method to manipulate time in JS_Basic knowledge

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills