サンプルコードは次のとおりです。
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()ますか？
リアルタイムのシナリオはありますか?
主な違いは、それappendChildが DOM メソッドでappendあり、jQuery メソッドであることです。2 番目のものは、jQuery ソース コードでわかるように最初のものを使用します。
append: function() {
return this.domManip(arguments, true, function( elem ) {
if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
this.appendChild( elem );
}
});
},
プロジェクトで jQuery ライブラリを使用している場合はappend、要素をページに追加するときに常に安全に使用できます。
append は JavaScript のメソッドになりました
MDN の引用
この
ParentNode.appendメソッドは、一連の Node オブジェクトまたはDOMStringオブジェクトを の最後の子の後に挿入しParentNodeます。DOMStringオブジェクトは同等の Text ノードとして挿入されます。
これは 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>append要素にコンテンツまたは HTML を追加する jQuery メソッドです。
$('#example').append('Some text or HTML');
appendChild子要素を追加するための純粋な DOM メソッドです。
document.getElementById('example').appendChild(newElement);
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>")
appendChildは純粋なJavaScriptメソッドであり、asappendはjQueryメソッドです。