JQueryでDOMを挿入する方法nodes_jquery

この記事の例では、JQuery を使用して DOM ノードを挿入する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

HTML 要素を動的に作成することは、新しく作成された要素をドキュメントに挿入する必要があるため、実際には役に立ちません。新しく作成したノードをドキュメントに挿入する最も簡単な方法は、そのノードをドキュメント内のノードの子ノードにすることです。以前はメソッド append() を使用してノードを挿入しました。これにより、要素内に新しく作成されたコンテンツが追加されます。

新しく作成したノードをドキュメントに挿入する方法は 1 つだけではなく、以下の表に示すように、JQuery には他の方法も用意されています。読者は実際のニーズに基づいて柔軟にさまざまな選択を行うことができます。

HTML DOM 構造は次のとおりです:

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

一致する各要素内にコンテンツを追加します:

HTML コード:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuery コード:

コードをコピー コードは次のとおりです:

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

結果:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと: a4b561c25d9afb9ac8dc4d70affff419こんにちは< /b> ;

appendTo()

一致するすべての要素を指定された要素に追加します。実際、このメソッドを使用すると、通常の $(A).append(B) 操作が逆になります。つまり、B を A に追加する代わりに、A を B に追加します。

HTML コード:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuer コード:

コードをコピー コードは次のとおりです:

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

結果:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと: a4b561c25d9afb9ac8dc4d70affff419こんにちは< /b> ;

prepend()

一致する各要素内のコンテンツを先頭に追加します:

HTML コード:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuer コード:

コードをコピー コードは次のとおりです:

$("p").prepend<"a4b561c25d9afb9ac8dc4d70affff419こんにちは< ; /b>");

結果:

コードをコピーします コードは次のとおりです:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419こんにちは0d36329ec37a2cc24d42c7229b69747a言いたいこと：94b3e26ee717c64999d7867364b1b4a3

prependTo()

一致するすべての要素を指定された要素の先頭に追加します。実際、このメソッドを使用すると、通常の $(A).prepend(B) 操作が逆になります。つまり、B を A の先頭に追加する代わりに、A を B の先頭に追加します。

HTML コード:

コードをコピー コードは次のとおりです:e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuer コード:

コードをコピー コードは次のとおりです:$("a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a")。 prependTo ("p");

結果:

コードをコピーします コードは次のとおりです:

e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419こんにちは0d36329ec37a2cc24d42c7229b69747a言いたいこと：94b3e26ee717c64999d7867364b1b4a3

after()

一致する各要素の後にコンテンツを挿入します:

HTML コード:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuer コード:

コードをコピー コードは次のとおりです:

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

結果:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3ebf9839865cf3c167d0f6b5b7c1739b0良いですね0d36329ec37a2cc24d42c7229b69747a

insertAfler()

一致するすべての要素を指定された要素の後に挿入します。実際、このメソッドを使用すると、通常の $(A).after(B) 操作が逆になります。つまり、A の後に B を挿入する代わりに、B の後に A が挿入されます。

HTML コード:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuer コード:

コードをコピー コードは次のとおりです:

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

結果:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3ebf9839865cf3c167d0f6b5b7c1739b0良いですね0d36329ec37a2cc24d42c7229b69747a

前()

一致する各要素の前にコンテンツを挿入します:

HTML コード:

コードをコピー コードは次のとおりです:

e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuer コード:

コードをコピー コードは次のとおりです:

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

結果:

コードをコピー コードは次のとおりです:

a4b561c25d9afb9ac8dc4d70affff419こんにちは0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846bee欲しいです言いたいこと：94b3e26ee717c64999d7867364b1b4a3

insertBefore()

一致するすべての要素を指定された要素の前にプッシュします。実際、このメソッドを使用すると、通常の $(A).before(B) 操作が逆になります。つまり、A の前に B を挿入する代わりに、B の前に A を挿入します。

HTML コード:

コードをコピー コードは次のとおりです:e388a4556c0f65e1904146cc1a846bee言いたいこと:94b3e26ee717c64999d7867364b1b4a3

jQuer コード:

コードをコピー コードは次のとおりです:$("a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a")。 insertBefore ("p");

結果:

コードをコピー コードは次のとおりです:a4b561c25d9afb9ac8dc4d70affff419こんにちは0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846bee欲しいです言うこと：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程序设计有所帮助。