JavaScriptを使用して追加して挿入する方法を比較します

最初のロード後にWebページを動的に更新するには、多くの場合、JavaScriptのAppend、AppendChild、IntersadJacenthtml、またはInnerHTMLメソッドが必要です。適切な方法を選択すると、追加されるコンテンツの種類やブラウザの互換性など、いくつかの要因に依存します。

DOMを理解する

Webサイトは、基本的に、ブラウザによってドキュメントオブジェクトモデル（DOM）ツリーにレンダリングされたHTMLファイルです。このツリーは、HTML要素（ノード）を表すネストされたオブジェクトで構成されています。 「ノード」、「要素」、「オブジェクト」などの用語は、「オブジェクト」が最も一般的であり、「HTML要素」が最も具体的なもので、「オブジェクト」などの用語が互換性があります。この階層を理解することは、JavaScriptでDOMを操作するために重要です。

方法と挿入方法

ほとんどの追加/挿入方法は、このパターンに従います： Element.method(content) 。要素をターゲットにするには、 document.querySelector() 、 document.getElementById() 、またはdocument.getElementsByClassName()などの方法を使用します。 getElementsByClassName()が配列を返すことを忘れないでください。

コンテンツの種類とメソッド互換性

メソッドの選択は、コンテンツのタイプに大きく依存します。

• ノード： document.createElement()を使用して作成するか、domから選択しました。 appendChildとノードを使用して作業append 。
• プレーンテキスト：単純なテキスト文字列。ほとんどの方法は、平易なテキストをサポートしています。
• HTML： HTML文字列。 insertAdjacentHTMLとinnerHTML HTMLを直接ハンドルします。

メソッドの互換性の概要は次のとおりです。

適切な方法を選択します

• 既存のHTML： HTMLをサポートするメソッド（例えば、 insertAdjacentHTML ）が最も簡単です。
• JavaScriptの新しいHTML：複雑なHTMLのノードの作成は面倒です。 HTML文字列はより簡潔です。
• イベントリスナー：即時のイベントリスナーの添付ファイルにノード（ appendChild 、 append ）を使用します。
• プレーンテキストのみ：プレーンテキストをサポートする方法は機能します。
• 信頼されていないHTML： insertAdjacentHTMLまたはinnerHTMLを使用する前に、ユーザーがサビされたHTMLを消毒します。
• Internet Explorerの互換性： IEサポートが必要な場合は、 append避けてください。

例：バディリストへのアプリ

さまざまな方法を使用して、新しいユーザー「Dale」をバディリストに追加しましょう。リストにあると仮定します<ul id="buddies"></ul>と<li><a>...</a></li>アイテム。

append

 const newbuddy = document.createelement（ 'li'）;
const newlink = document.createelement（ 'a'）;
newlink.append（ "dale"）;
newbuddy.append（newlink）;
document.queryselector（ '＃buddies'）。append（newbuddy）;

appendChild

 const newbuddy = document.createelement（ 'li'）;
const newlink = document.createelement（ 'a'）;
newlink.textContent = "dale";
newbuddy.AppendChild（NewLink）;
document.queryselector（ '＃buddies'）。appendchild（newbuddy）;

insertAdjacentHTML

 document.queryselector（ '＃buddies'）。insertadjacenthtml（ 'befored'、 '

innerHTML （追加することをお勧めしません）

 document.queryselector（ '＃buddies'）。innerhtml = '

innerHTML 、内側のHTML全体を置き換え、イベントリスナーを削除する可能性があるため、問題があります。

デモと要約

ここでは、すべてのメソッドを紹介する包括的なデモが有益です（簡潔にするためにコードは省略されています）。要約すれば：

• イベントリスナーの損失のために、AppendingのinnerHTML避けてください。
• append柔軟性を提供し、単純なケースには効率的ですが、IEサポートがありません。
• appendChildは広く互換性があり、ノード操作に適しています。
• insertAdjacentHTML 、正確な配置を提供し、HTML文字列を効果的に処理しますが、ユーザー入力の慎重な消毒が必要です。

より高度なDOM操作のために、 before 、 after 、 insertBefore 、およびinsertAdjacentElementのさらなる調査が奨励されます。

以上がJavaScriptを使用して追加して挿入する方法を比較しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。