JavaScript を使用して既存の HTML 要素に HTML コンテンツを追加する

1. InnerHTML を使用して新しい HTML ノードを追加することの欠点
2. DOM 要素を置き換えずに HTML コンテンツを追加する
3. JavaScript で appendChild() を使用して HTML コンテンツを追加する
4. insertAdjacentHTML() を使用して HTML ノードを追加する

javascript を使用して div または別の HTML 要素に HTML コンテンツを追加するのは簡単です。要素の HTMLElement.innerHTML プロパティを新しい HTML コンテンツで設定できます。ただし、プロセス中に、追加されたすべての動的属性が消去されます。

InnerHTML を使用して新しい HTML ノードを追加することの欠点

• HTMLElement.innerHTML は、要素内の HTML コンテンツを削除してから、新しい HTML を含めて再度追加することで機能します。本質的には、新しいコンテンツを追加するだけでなく、HTML コンテンツを置き換えます。
• innerHTML プロパティを使用して新しい HTML 要素を DOM に追加すると、すべての子孫ノードも削除され、新しい HTML コンテンツ（innerHTML プロパティに割り当てられた HTML 文字列）を解析して作られた新しいノードで置き換えられ、HTML 全体が新しくレンダリングされます。
• サイバーセキュリティレビューを受けるプロジェクトで innerHTML を使用しているときに、コードが拒否される可能性があることはあまり知られていません。innerHTMl は潜在的なセキュリティリスクを伴う可能性があるため、直接使用しないことをお勧めします（詳細については、MDN リンクを参照してください）。

DOM 要素を置き換えずに HTML コンテンツを追加する

HTML コードの一部を既存の DOM に追加するには、JavaScript の次の組み込み関数を使用できますが、既に添付されている動的コンテンツが失われる心配はありません。

• appendChild()
• insertAdjacentHTML()

JavaScript で appendChild() を使用して HTML コンテンツを追加する

appendChild() は innerHTML と同じ目的を果たします。これらの両方の方法を使用して、HTML コンテンツをノードに追加できます。2つのアプローチの違いは、appendChild() が関数であるのに対し、innerHTML はプロパティであるということです。appendChild() は、innerHTML プロパティによって行われるように DOM のコンテンツを置き換える代わりに、既存の DOM 要素にノードを追加します。

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="adress">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;
addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.appendChild(i);
}

上記のコードを使用して、ユーザーの名前と住所を取得するためのフォームを作成しました。通常、アドレスには複数の行があります。したがって、これらの追加の住所行をキャプチャするためにクリックすると、新しい入力フィールドを追加するボタンを作成しました。以下は、新しい入力フィールドを作成するためのプロセスです。

1. Add Address Line ボタンのクリックイベントで addAddressLine 関数を呼び出します。
2. 関数では、document.createElement('input') 関数を使用して HTML input を動的に作成します。i 変数に格納された作成済みの input 要素を返します。
3. 次に、setAttribute() メソッドを使用して、作成された input 変数に type および placeholder 属性を設定します。
4. 既存の div 構造に input 要素を追加する準備ができました。したがって、全体として div 構造を返す docuemnt.getElementById() を使用して address div をクエリし、JavaScript の appendChild(i) 関数を使用します。
5. appendChild(i) 関数は、変数 i によって保持される動的に作成された input 要素を追加し、それを address div の最後に配置します。lineCount を使用して、新しい入力フィールドを追加するたびにプレースホルダー値をインクリメントします。

ノート

• 作成した要素を DOM に追加するために、新しいメソッド append() を使用することもできます。javascript メソッド append を使用すると、DOMString（単純な文字列テキスト）を引数として使用でき、値を返しません。Internet Explorer ブラウザは新しい append() メソッドをサポートしていないことに注意してください。
• Internet Explorer を含むすべての最新の Web ブラウザーは、古い appendChild() 関数をサポートしています。

insertAdjacentHTML() を使用して HTML ノードを追加する

appendChild() および append() 関数でさえ、指定された HTML ノードに新しい要素を追加することができます。これらのメソッドはどちらも、最後の子の後に要素を挿入します。すべてのシナリオで役立つとは限りません。特に、HTML 構造の指定された位置に HTML ノードを追加する場合。このような場合、insertAdjacentHTML() 関数を使用できます。それはいくつかのパラメータ、位置とその位置のテキストを取ります。

• Position：insertAdjacentHTML は、position パラメーターで 4つの値をサポートします。

  • beforebegin：要素の開始前に HTML ノードを挿入します。
  • afterbegin：名前が示すように、このオプションは、選択したノードの開始タグの直後に要素を挿入し、最初の子の前に配置します。
  • beforeend：これは appendChild() に似ています。名前が示すように、beforeend 位置は要素を最後の子の直後に配置します。
  • afterend：ターゲット HTML ノードタグが閉じた後の位置を指します。

• String：HTML を文字列形式で 2 番目のパラメータとして挿入できます。例：<div> Hello World!</div>。

一見すると、表現は次のようになります。

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>
  <!-- beforeend -->
</div>
<!-- afterend -->

JavaScript の insertAdjacentHTML() 関数を使用して appendChild() について説明したのと同じ例を見てみましょう。

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="address">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;

addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.insertAdjacentElement('beforeend', i);
}

このコードでは、パラメーターの beforeend オプションを使用して、動的に作成された入力要素を address div の最後に追加しました。afterend、beforebegin、afterbegin パラメーターなどの他の属性を試してみることができます。