javascript - DOM 要素の追加、正しい方法とは?

Question

この質問はばかげているか、基本的なものかもしれません。

誰かが DOM 要素を追加するのに最適な方法を説明できますか? DOM 要素を追加するには、次の 2 つの方法があります。

シナリオ:<strong>Hi</strong>既存の 内に追加する必要があり<div id="theEl"></div>ます。

1. その中の HTML を編集する。

   document.getElementById("theEl").innerHTML = '<strong>Hi</strong>';
   

2. を使用してdocument.createElement()。

   var hi = document.createTextNode("Hi"),
   strong = document.createElement("strong");
   strong.appendChild(hi);
   mydiv = document.getElementById("theEl");
   document.body.insertBefore(strong, mydiv);
   

質問

1. 最善の方法は何ですか？1 つは 1 行、もう 1 つは約 5 行です。
2. パフォーマンス面とは？
3. 正しい方法またはベストプラクティスは何ですか?
4. コード全体に違いはありますか？

この質問がまったく意味をなさない場合は、お知らせください。喜んでこれを閉じるか、削除します。ありがとう。

---

アップデート

近い有権者にとって、これはその質問の複製にはなりません。たった今指摘したことの 1 つはcreateElement()、要素にアタッチされたイベント ハンドラーを保持することです。それは良い点ですが、あらゆる種類の基本的な Web ページにも jQuery が含まれており、委譲や、HTML の変更後でも要素にイベントを関連付けることができるようなものを提供します。

---

皆さん、僅差の投票で冷静になってください。一種の研究です。