web-dev-qa-db-ja.com

jQuery append（）vs appendChild（）

サンプルコードを次に示します。

function addTextNode(){
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    para.appendChild(newtext);
    $("#p1").append("HI");
}

<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.<br /></p>
</div>

append()とappendChild()の違いは何ですか？
リアルタイムシナリオはありますか？

javascriptjqueryappendappendchild
75
user2067567

主な違いは、appendChildはDOMメソッドであり、appendはjQueryメソッドであるということです。 jQueryのソースコードを見るとわかるように、2番目のものは最初のものを使用しています

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.appendChild( elem );
        }
    });
},

プロジェクトでjQueryライブラリを使用している場合は、ページに要素を追加するときに常にappendを使用して安全です。

87
Claudio Redi

もはや

現在appendはJavaScriptのメソッドです

appendメソッドに関するMDNドキュメント

MDNの引用

ParentNode.appendメソッドは、NodeオブジェクトまたはDOMStringオブジェクトのセットをParentNodeの最後の子の後に挿入します。 DOMStringオブジェクトは、同等のテキストノードとして挿入されます。

これはIEおよびEdgeではサポートされていませんが、Chrome（54 +）、Firefox（49 +）、Opera（39+）でサポートされています。

JavaScriptの追加は、jQueryの追加に似ています。

複数の引数を渡すことができます。

var Elm = document.getElementById('div1');
Elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(Elm.innerHTML);
<div id="div1"></div>
30
Sagar V

appendは、コンテンツまたはHTMLを要素に追加するjQueryメソッドです。

$('#example').append('Some text or HTML');

appendChildは、子要素を追加するための純粋なDOMメソッドです。

document.getElementById('example').appendChild(newElement);
15
Fenton

私はこれが古くて答えられた質問であることを知っています、そして、私は投票を探していません。

はいappendChildはDOMメソッドであり、appendはJQueryメソッドですが、実質的に重要な違いはappendChildがノードをパラメーターとして取るということです。つまり、空の段落をDOMに追加する場合はp要素を最初に作成する必要があります

var p = document.createElement('p')

それをDOMに追加することができますが、JQuery appendはそのノードを作成し、それがテキスト要素、html要素、または組み合わせのいずれであるかにかかわらず、すぐにDOMに追加します！

$('p').append('<span> I have been appended </span>');

7
kapreski

appendChildはDOM Vanilla-js 関数です。

appendはjQuery関数です。

彼らはそれぞれ独自の癖を持っています。

5
Neal

JavaScript appendchild メソッドを使用して、アイテムを別の要素に追加できます。 jQuery Append 要素は同じ作業を行いますが、確かに少ない行数で行います：

リスト内のアイテムを追加する例を見てみましょう。

a）JavaScriptを使用

var n= document.createElement("LI");                 // Create a <li> node
var tn = document.createTextNode("JavaScript");      // Create a text node
n.appendChild(tn);                                   // Append the text to <li>
document.getElementById("myList").appendChild(n);

b）jQueryを使用

$("#myList").append("<li>jQuery</li>")
0
Diana J.

appendChildは純粋なjavascriptメソッドであり、appendはjQueryメソッドです。

0
Krishna