JavaScript がデータを div に追加

1. JavaScript で innerHTML を使用して div にデータを追加する
2. JavaScript で appendChild を使用して div にデータを追加する
3. JavaScript で insertAdjacentHTML() を使用して div にデータを追加する
4. jQuery の append() を使用してデータを div に追加する

このチュートリアルでは、JavaScript を使用して div にデータを追加する方法を紹介します。

JavaScript で innerHTML を使用して div にデータを追加する

このメソッドでは、最初にセレクターの 1つ（getElementById、getElementByTag、querySelector など）を使用して div を選択します。次に、div の innerHTML 属性にデータを追加します。この方法には 1つの欠点があります。それは、選択した div 上の既存のイベントリスナーをすべて削除することです。また、内部に含まれているすべてのノードを破棄し、新しいノードに置き換えます。要素へのすべての参照は失われます。

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

JavaScript で appendChild を使用して div にデータを追加する

前の方法と同様に、最初にセレクターの 1つを使用して div を選択します。ただし、前の方法で説明した問題のため、innerHTML の代わりに appendChild を使用します。子を追加する前に、テキストノードを作成する必要があります。

var targetDiv = document.getElementById('ID');
var content = document.createTextNode('data that you want to add');
targetDiv.appendChild(content);

JavaScript で insertAdjacentHTML() を使用して div にデータを追加する

2 番目の方法と同様に、この方法は最初の方法よりも優れた代替方法です。insertAdjacentHTML() は要素を再解析しません。また、内部の既存の要素に干渉しません。innerHTML よりもはるかに高速です。また、データを挿入する位置を指定するのにも役立ちます。以前のメソッドと同様に、最初に div を選択し、次に insertAdjacentHTML() を使用して必要な位置にデータを追加します。

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

jQuery の append() を使用してデータを div に追加する

append 関数は、追加する必要のあるコンテンツの入力を受け取り、jQuery 構文を使用してタグで直接呼び出すことができます。このメソッドには、innerHTML メソッドのすべての欠点もあります。

$('.divd').append('<p>Test</p>');