JavaScript kullanarak div'e veri nasıl eklenir?

JavaScript JavaScript'ten div doldurmak için div öğesine veri eklemek için AJAX kullanıyorum, div önceki verileri kaybetmeden div yeni veri nasıl ekleyebilirim?

Bunu dene:

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

div.innerHTML += 'Extra stuff';

AppendChild kullanma:

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

İnnerHTML kullanımı:
Bu yaklaşım, @BiAiB tarafından belirtilen mevcut öğelerin tüm dinleyicilerini kaldıracaktır. Bu sürümü kullanmayı planlıyorsanız dikkatli olun.

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

Dikkat innerHTML, sen tür kaybetmek şey Eğer kullandığınız zaman:

theDiv.innerHTML += 'content',     

Şuna eşittir:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Hangi içindeki tüm düğümleri yok edecek divve yenilerini yeniden oluşturacak. İçindeki öğelere yapılan tüm referanslar ve dinleyiciler kaybolacaktır .

Bunları saklamanız gerekiyorsa (örneğin, bir tıklama işleyicisi eklediğinizde), yeni içerikleri DOM işlevlerine (appendChild, insertAfter, insertBefore) eklemeniz gerekir:

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

Hızlı bir şekilde yapmak ve referansları ve dinleyicileri kaybetmek istemiyorsanız: .insertAdjacentHTML () ;

" Kullanıldığı elemanı yeniden parçalamaz ve bu nedenle elemanın içindeki mevcut elemanları bozmaz . Bu ve fazladan serileştirme adımından kaçınmak onu doğrudan innerHTML manipülasyonundan çok daha hızlı hale getirir ."

Tüm ana hat tarayıcılarında (IE6 +, FF8 +, Diğerleri ve Mobil) desteklenir: http://caniuse.com/#feat=insertadjacenthtml

Https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML sitesinden bir örnek

// <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 kullanıyorsanız $('#mydiv').append('html content'), mevcut içeriği saklayabilirsiniz .

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

Bu bile işe yarar:

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

div.innerHTML += 'Text to append';

IE9 + (Vista +) çözümü, yeni metin düğümleri oluşturmadan:

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

Ancak, her mesajdan sonra yeni bir satıra ihtiyaç duyduğum için bu benim için hile yapmadı, bu yüzden DIV'm bu kodla stilize bir UL'ye dönüştü:

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

Gönderen https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent :

İç HTML'den farklılıklar

innerHTML, HTML'yi adından da anlaşılacağı gibi döndürür. Çoğu zaman, bir öğenin içindeki metni almak veya yazmak için, insanlar innerHTML kullanır. Bunun yerine textContent kullanılmalıdır. Metin HTML olarak ayrıştırılmadığından, daha iyi performans gösterebilir. Dahası, bu bir XSS saldırı vektörünü önler.

jQuery kullanabilirsiniz. bu da çok basit.

jQuery dosyasını jQuery'yi HTML'nize ekleyin
veya çevrimiçi kullanıcı bağlantısı yapabilirsiniz:

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

ve şunu deneyin:

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

Aşağıdaki yöntem diğerlerinden daha az geneldir, ancak div'ın son alt düğümünün zaten bir metin düğümü olduğundan emin olduğunuzda harikadır. Bu şekilde, MDN Reference AppendData kullanarak yeni bir metin düğümü oluşturmazsınızappendData

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");

Neden sadece setAttribute kullanmıyorsunuz?

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

Ardından bu verileri aşağıdaki yollarla alabilirsiniz:

thisDiv.attrName;

java betiği

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

jQuery

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

.html()Girdiğinizi görmek için argüman olmadan kullanın . Kodunuzda kullanmadan önce bu işlevleri hızlı bir şekilde test etmek için tarayıcı konsolunu kullanabilirsiniz.