javascript - jqueryを使わないDOMインジェクション

Question

jquery ライブラリを使用せずに、DOM インジェクションで HTML タグをインジェクトする方法を考えています。

外部の JavaScript ファイルから元のページにいくつかのオブジェクトを生成したいのですが、jquery に依存したくなく (90kb であるため)、スクリプトを使用するサイトを制御できません。

Answer 1

どちらかを使用

 object.innerHTML = "<br/><span>Text</span>"

または、appendChild を使用します。

 var child = element.appendChild(child);

https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild?redirectlocale=en-US&redirectslug=DOM%2Felement.appendChild

どちらも機能します。

Answer 2

探しているだけですか:

newNode = document.createElement(tagType);

と

parent.appendChild(newNode);

documentレベル関数の詳細については、https ://developer.mozilla.org/en-US/docs/DOM/documentを参照してください。

要素を操作するメソッドについては、https://developer.mozilla.org/en-US/docs/DOM/elementを参照してください

Answer 3

作成する要素が多く、それらが共通のルート ノードに含まれている場合は、 を作成し、およびメソッドdocumentFragmentを使用して生成する必要があるすべてのノードを追加することをお勧めします。createElement()appendChild()

documentFragment次に、ドキュメントに追加するだけです

MDN リファレンスから: createDocumentFragment

ドキュメント フラグメントはメモリ内にあり、メイン DOM ツリーの一部ではないため、それに子を追加してもページ リフロー (要素の位置とジオメトリの計算) は発生しません。その結果、ドキュメント フラグメントを使用すると、多くの場合、パフォーマンスが向上します。