Bagaimana cara menambahkan data ke div menggunakan JavaScript?

Saya menggunakan AJAX untuk menambahkan data ke elemen div, di mana saya mengisi div dari JavaScript, bagaimana saya bisa menambahkan data baru ke div tanpa kehilangan data sebelumnya yang ditemukan di div?

Coba ini:

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

div.innerHTML += 'Extra stuff';

Menggunakan appendChild:

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

Menggunakan innerHTML:
Pendekatan ini akan menghapus semua pendengar ke elemen yang ada seperti yang disebutkan oleh @BiAiB. Jadi gunakan hati-hati jika Anda berencana untuk menggunakan versi ini.

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

Waspadalah terhadap innerHTML, Anda kehilangan sesuatu saat menggunakannya:

theDiv.innerHTML += 'content',     

Setara dengan:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Yang akan menghancurkan semua node di dalam Anda divdan membuat yang baru. Semua referensi dan pendengar elemen di dalamnya akan hilang .

Jika Anda perlu menyimpannya (ketika Anda telah melampirkan handler klik, misalnya), Anda harus menambahkan konten baru dengan fungsi DOM (appendChild, masukkanSetelah, masukkanSebelum):

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

Jika Anda ingin melakukannya dengan cepat dan tidak ingin kehilangan referensi dan pendengar gunakan: .insertAdjacentHTML () ;

"Itu tidak memecah elemen yang sedang digunakan dan karenanya tidak merusak elemen yang ada di dalam elemen. Ini, dan menghindari langkah tambahan serialisasi membuatnya lebih cepat daripada manipulasi innerHTML langsung."

Didukung di semua browser arus utama (IE6 +, FF8 +, Lainnya, dan Seluler): http://caniuse.com/#feat=insertadjacenthtml

Contoh dari 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>

Jika Anda menggunakan jQuery, Anda dapat menggunakan $('#mydiv').append('html content')dan itu akan menjaga konten yang ada.

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

Bahkan ini akan berhasil:

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

div.innerHTML += 'Text to append';

Solusi IE9 + (Vista +), tanpa membuat simpul teks baru:

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

Namun, ini tidak cukup membantu saya karena saya membutuhkan baris baru setelah setiap pesan, jadi DIV saya berubah menjadi UL bergaya dengan kode ini:

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

Dari https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :

Perbedaan dari innerHTML

innerHTML mengembalikan HTML seperti namanya. Cukup sering, untuk mengambil atau menulis teks dalam suatu elemen, orang menggunakan innerHTML. textContent harus digunakan sebagai gantinya. Karena teks tidak diuraikan sebagai HTML, itu cenderung memiliki kinerja yang lebih baik. Selain itu, ini menghindari vektor serangan XSS.

Anda bisa menggunakan jQuery. yang membuatnya sangat sederhana.

cukup unduh file jQuery, tambahkan jQuery ke HTML
Anda atau Anda dapat menggunakan tautan daring:

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

dan coba ini:

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

Metode berikut ini kurang umum daripada yang lain namun itu bagus ketika Anda yakin bahwa simpul anak terakhir Anda dari div sudah menjadi simpul teks. Dengan cara ini Anda tidak akan membuat simpul teks baru menggunakan appendData MDN Reference 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");

Mengapa tidak menggunakan setAttribute saja?

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

Maka Anda bisa mendapatkan data ini dengan:

thisDiv.attrName;

skrip java

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

jquery

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

Gunakan .html()tanpa argumen apa pun untuk melihat bahwa Anda telah memasukkan. Anda dapat menggunakan konsol browser untuk dengan cepat menguji fungsi-fungsi ini sebelum menggunakannya dalam kode Anda.