ここにいくつかのサンプルコードがあります：

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メソッドとappendjQueryメソッドです。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場合は、ページに要素を追加するときに常に安全に使用できます。

もはや

追加はJavaScriptのメソッドです

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

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

私はこれが古くて回答済みの質問であることを知っており、投票を探していません。新規参入者に役立つと思われる追加の小さなことを追加したいだけです。

はい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>');

appendChildDOM vanilla-js関数です。

append jQuery関数です。

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

appendChild純粋であり、JavaScriptのような方法appendであるjQueryの方法は。

JavaScriptののappendChildの方法は、別の要素に項目を追加するために使用することができます。jQueryの追加の要素は、ラインのより少ない数では確かに同じ作業を行いますが：

リストに項目を追加する例を見てみましょう：

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