DOM APIでのDOM生成と、$.append()で直接追記することの違い

Question

ご指摘ありがとうございます。適切な質問文に訂正いたしました。
jQueryで作業していたのですが、$.append()とElement.appendChild()は同じだと誤解していたため、質問文から省いてしまいました。

---

いま <ul> 要素に <li> 要素を追加する処理を作成中なのですが、
DOM APIの Document.createElement() などのメソッドを使ってDOMを生成して追加するのと、

const ul = document.getElementsByTagName('ul')[0];
ul.innerHTML += '<li></li>';

や

$('ul').append( '<li></li>' );

のように
直接HTMLを書いてしまう方法にはどのような違いがありますか？

他のメンバーがあまりDOM操作の経験がないこともあり、
可読性を考えたら直接書いてしまった方がいいかと思ったのですが、
皆さまのご意見を伺いたいです。

Answer 1

jQueryの要素生成は、innerHTMLよりもcreateElementに近いです。jQueryを使うのならば基本的にはjQueryで書くのが良いと思います。チェーンできるので。

createElementなどは「要素オブジェクトを生成→DOMに追加」というプロセスであるのに対して、innerHTMLは「対象要素の中身をHTMLテキストの文字列に変換→文字列を書き換え→文字列をDOMに変換→中身を全て新しいDOMで置き換え」となるため、とくにinnerHTMLが大きくなるほど無駄が多いです。最後に要素を追加するだけでもinnerHTML全体が再読み込みされるので。
またinnerHTMLを弄るとDOM構造を破壊してしまうことに対してなんの保険もありませんし、script要素はDOMに追加された瞬間に実行されるのでinnerHTMLで書き込むと実行されません。

結局の所どれを使えば良いのかですが、jQueryなら$.appendで良いでしょう。ピュアJSならcreateElementか、insertAdjacentHTMLです。
ですがinsertAdjacentHTMLでHTMLを要素に変換して挿入した場合、その要素を変数に入れて弄るにはgetElementする必要があるので、すぐに利用したい場合はやはりcreateElementするのが良いでしょう。
ちなみにappendChildは子要素を戻り値にとるので次のようにも書けます。

var li = ul.appendChild(document.createElement('li'));

---

(修正前)
まずそのコードだと動かないです。
jqueryなどを使わない場合、基本的にDOMに要素を追加するには、createElementで要素を作ってappendChildする必要があります。とくにscript要素はこれ以外で追加しても実行されません。

どうしてもHTMLの形でappendしたいならinsertAdjacentHTMLを使います。

要素の追加では、innerHTMLを直接弄るのは避けましょう。

Comments

[H40831]

appendChildでは要素は追加できないのですね。失礼しました。
質問文を訂正いたしました。

[H40831]

詳しく追記いただきありがとうございます！
2つにどのような違いがあるだけでなく、
jQueryのappend()についても詳しいご説明いただき助かりました。
今後DOM操作する際は、きちんと適切な方法で行いたいと思います。

Answer 2

DOMでulにliを追加

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  ["aaa","bbb","ccc"]
    .map(x=>Object.assign(document.createElement('li'),{textContent:x}))
    .reduce((x,y)=>(x.appendChild(y),x),document.querySelector('ul'));
});
</script>
<ul></ul>

Answer 3

勘違いしていたので大幅な修正を行いました。

appendChild is a native DOM method and only accepts DOM nodes as a parameter. The element you're trying to append (panelDiv) is a jQuery object, not a DOM element. You can either append the DOM element:

SO

.appendChildはDOM操作しなければできません。
失礼しました。

MDN

###訂正を受けて

個人的には何方でも良いと思います。
ただ、クラスや内容が多くなるならDOM生成、それ以外は直で書いたほうが個人的には綺麗だと思います。

Comments

[H40831]

私も勘違いしてました。申し訳ありません。
質問文を訂正いたしました。

[H40831]

追記ありがとうございます。
自分も、再利用したりするような処理であればDOM生成のほうが良いと思いましたが、
今回のような単純な用途であれば、どちらでもいいくらいの感じでしょうか。

[kyoya0819]

そうですね。個人的見解としては、

Answer 4

そのコードだけで判断するのは難しいのですけど（用途次第）
出力する結果は同じなので、しっかりと用途を見定めて決めれば良いのではないでしょうか。

下記のような質問は確認されましたか？
teratail:JSで高速なのはどっちなのか。

Comments

[H40831]

失礼しました。コードを追記しました。
また、参考記事の共有ありがとうございます。
そちらではXSSの危険性が〜という話でしたが、ユーザー任意の値はすべてサーバー側でエスケープ済の状況だったので、そこまで考えておりませんでした。

[m.ts10806]

ん？
今作られたばかりのliの内部情報が既にエスケープ済みっておかしくないですか？
「出力時にエスケープ」が鉄則のはずですが。

[H40831]

えっと、
ユーザーが任意で入力できる値はサーバーにAjaxでリクエストして取得してくるものだけなのですが、
そのAjaxのレスポンスを出力する際にすべてエスケープしています。
JavaScriptで直接記述する部分には、任意の値はいれてありません。

この条件だと、XSSの対策にはなっているかと思ったのですが、
認識は合ってますか？？

[m.ts10806]

Ajaxから返ってきたからと画面表示させるのはJavaScriptの仕事なのでJavaScript側でやるものかと。
何を返してるのかは知らないですが、前提や本来の目的書いてないままなので的確なアドバイスにはなりませんよ。

[H40831]

詳細お伝えしてない状況でするべき質問ではなかったですね。失礼しました。
本題から逸れてしまうので、XSS対策については、また別の機会に調べてみます。