1. ホーム
  2. javascript

[解決済み] jQueryのappend()とappendChild()の比較

2022-03-08 20:02:32

質問

以下はサンプルコードです。

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のメソッドです。jQueryのソースコードにあるように、2番目のメソッドは1番目のメソッドを使用しています。

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

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