JQuery-Methode zum Einfügen von DOM-Knoten_jquery

Das Beispiel in diesem Artikel beschreibt die Methode zum Einfügen von DOM-Knoten mit JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Das dynamische Erstellen von HTML-Elementen hat keinen praktischen Nutzen, da die neu erstellten Elemente in das Dokument eingefügt werden müssen. Die einfachste Möglichkeit, einen neu erstellten Knoten in ein Dokument einzufügen, besteht darin, ihn zu einem untergeordneten Knoten eines Knotens im Dokument zu machen. Zuvor haben wir zum Einfügen von Knoten eine Methode append() verwendet, die den neu erstellten Inhalt innerhalb des Elements anhängt.

Es gibt nicht nur eine Möglichkeit, einen neu erstellten Knoten in ein Dokument einzufügen. JQuery bietet auch andere Möglichkeiten zum Einfügen von Knoten, wie in der folgenden Tabelle gezeigt. Der Leser kann je nach tatsächlichem Bedarf flexibel eine Vielzahl von Entscheidungen treffen.

HTML-DOM-Struktur ist wie folgt:

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

Inhalt in jedes passende Element einfügen:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuery-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen: a4b561c25d9afb9ac8dc4d70affff419Hallo< /b> ;94b3e26ee717c64999d7867364b1b4a3

appendTo()

Alle passenden Elemente an das angegebene Element anhängen. Tatsächlich kehrt die Verwendung dieser Methode den regulären $(A).append(B)-Vorgang um, d. h. statt B an A anzuhängen, wird A an B angehängt:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuer-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen: a4b561c25d9afb9ac8dc4d70affff419Hallo< /b> ;94b3e26ee717c64999d7867364b1b4a3

prepend()

Inhalt jedem passenden Element voranstellen:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuer-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hallo, ich möchte zu sagen: 94b3e26ee717c64999d7867364b1b4a3

prependTo()

Alle passenden Elemente dem angegebenen Element voranstellen. Tatsächlich kehrt die Verwendung dieser Methode die reguläre $(A).prepend(B)-Operation um, d. h. statt B vor A voranzustellen, wird A vor B vorangestellt:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuer-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419Hallo, ich möchte zu sagen: 94b3e26ee717c64999d7867364b1b4a3

after()

Inhalt nach jedem passenden Element einfügen:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuer-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3< ;b>Du bist gut0d36329ec37a2cc24d42c7229b69747a

insertAfler()

Fügen Sie alle passenden Elemente nach dem angegebenen Element ein. Tatsächlich kehrt die Verwendung dieser Methode die reguläre $(A).after(B)-Operation um, d. h. statt B nach A einzufügen, wird A nach B eingefügt:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuer-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3< ;b>Du bist gut0d36329ec37a2cc24d42c7229b69747a

before()

Inhalt vor jedem passenden Element einfügen:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuer-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

a4b561c25d9afb9ac8dc4d70affff419Hallo0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeIch möchte zu sagen: 94b3e26ee717c64999d7867364b1b4a3

insertBefore()

Schiebt alle passenden Elemente vor das angegebene Element. Tatsächlich kehrt die Verwendung dieser Methode die reguläre $(A).before(B)-Operation um, d. h. statt B vor A einzufügen, fügen Sie A vor B ein:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

e388a4556c0f65e1904146cc1a846beeIch möchte sagen:94b3e26ee717c64999d7867364b1b4a3

jQuer-Code:

Code kopieren Der Code lautet wie folgt:

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

Ergebnis:

Code kopieren Der Code lautet wie folgt:

a4b561c25d9afb9ac8dc4d70affff419Hallo0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beeIch möchte zu sagen: 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程序设计有所帮助。