JavaScriptを使用してdivにデータを追加する方法

AJAXを使用してdiv要素にデータを追加しています。JavaScriptからdivにデータを入力します。divにある以前のデータを失うことなく、divに新しいデータを追加するにはどうすればよいですか？

これを試して：

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

appendChildの使用：

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

innerHTMLの使用：
このアプローチでは、@ BiAiBで言及されているように、既存の要素に対するすべてのリスナーが削除されます。したがって、このバージョンを使用する予定がある場合は注意してください。

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>"; 

に注意してくださいinnerHTML、あなたがそれを使うとき、あなたは一種の何かを失います：

theDiv.innerHTML += 'content',     

以下と同等です。

theDiv.innerHTML = theDiv.innerHTML + 'content'

これにより、内部のすべてのノードが破棄され、div新しいノードが再作成されます。その内部の要素へのすべての参照とリスナーは失われます。

それらを保持する必要がある場合（たとえば、クリックハンドラーをアタッチした場合）、新しいコンテンツをDOM関数（appendChild、insertAfter、insertBefore）に追加する必要があります。

var newNode = document.createElement('div');      
newNode.innerHTML = data;
theDiv.appendChild( newNode )

高速に実行したいが、参照とリスナーを失いたくない場合は、.insertAdjacentHTML（）を使用します。

「使用されている要素を再解析しないため、要素内の既存の要素が破損することはありません。これにより、シリアル化の余分な手順を回避することで、innerHTMLを直接操作するよりもはるかに高速になります。」

すべてのメインラインブラウザー（IE6 +、FF8 +、その他すべて、およびモバイル）でサポート：http ://caniuse.com/#feat=insertadjacenthtml

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTMLの例

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

jQueryを使用$('#mydiv').append('html content')している場合は使用でき、既存のコンテンツが保持されます。

http://api.jquery.com/append/

これでもうまくいきます：

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

新しいテキストノードを作成しないIE9 +（Vista +）ソリューション：

var div = document.getElementById("divID");
div.textContent += data + " ";

ただし、メッセージごとに新しい行が必要だったので、これは私にとってはうまくいかなかったので、DIVは次のコードでスタイル付きULに変わりました。

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContentから：

innerHTMLとの違い

innerHTMLは、その名前が示すとおりにHTMLを返します。多くの場合、要素内のテキストを取得または書き込むために、innerHTMLを使用します。代わりにtextContentを使用する必要があります。テキストはHTMLとして解析されないため、パフォーマンスが向上する可能性があります。さらに、これによりXSS攻撃ベクトルが回避されます。

jQueryを使用できます。それはそれを非常に簡単にします。

jQueryファイルをダウンロードして、jQueryをHTMLに追加する
か、オンラインリンクを使用できます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

これを試してください：

 $("#divID").append(data);

次のメソッドは他のメソッドよりも一般的ではありませんが、divの最後の子ノードがすでにテキストノードであることが確実な場合に最適です。この方法では、MDNリファレンスAppendDataを使用して新しいテキストノードを作成しません。appendData

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;

if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

なぜsetAttributeを使用しないのですか？

thisDiv.setAttribute('attrName','data you wish to append');

その後、次の方法でこのデータを取得できます。

thisDiv.attrName;

Javaスクリプト

document.getElementById("divID").html("this text will be added to div");

jquery

$("#divID").html("this text will be added to div");

.html()引数なしで使用して、入力したことを確認します。これらの関数をコードで使用する前に、ブラウザーコンソールを使用してこれらの関数をすばやくテストできます。