Jak dołączyć dane do div za pomocą JavaScript?

Używam AJAX do dołączania danych do elementu div, gdzie wypełniam div z JavaScript, jak mogę dołączyć nowe dane do div bez utraty poprzednich danych znalezionych w div?

Spróbuj tego:

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

div.innerHTML += 'Extra stuff';

Korzystanie z appendChild:

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

Korzystanie z innerHTML:
To podejście usunie wszystkie nasłuchiwania z istniejących elementów, jak wspomniano w @BiAiB. Dlatego zachowaj ostrożność, jeśli planujesz korzystać z tej wersji.

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

Uważaj innerHTML, jakbyś coś stracił, gdy go używasz:

theDiv.innerHTML += 'content',     

Jest równa:

theDiv.innerHTML = theDiv.innerHTML + 'content'

Które zniszczą wszystkie węzły wewnątrz divi odtworzą nowe. Wszystkie odniesienia i słuchacze elementów w nim zawartych zostaną utracone .

Jeśli chcesz je zachować (na przykład po dołączeniu modułu obsługi kliknięć), musisz dołączyć nową zawartość do funkcji DOM (appendChild, insertAfter, insertBefore):

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

Jeśli chcesz to zrobić szybko i nie chcesz stracić referencji, a detektory używają: .insertAdjacentHTML () ;

„Nie dokonuje ponownej analizy elementu, na którym jest używany, a zatem nie uszkadza istniejących elementów wewnątrz elementu. To i uniknięcie dodatkowego kroku serializacji sprawiają, że jest to znacznie szybsze niż bezpośrednia manipulacja HTML.”

Obsługiwane we wszystkich przeglądarkach głównych (IE6 +, FF8 +, Wszystkie inne i urządzenia mobilne): http://caniuse.com/#feat=insertadjacenthtml

Przykład z 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>

Jeśli korzystasz z jQuery, możesz go użyć $('#mydiv').append('html content')i zachowa on istniejącą zawartość.

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

Nawet to zadziała:

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

div.innerHTML += 'Text to append';

Rozwiązanie IE9 + (Vista +), bez tworzenia nowych węzłów tekstowych:

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

Jednak to nie całkiem załatwiło sprawę, ponieważ potrzebowałem nowej linii po każdej wiadomości, więc mój DIV zmienił się w styl UL z tym kodem:

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

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

Różnice w stosunku do innerHTML

innerHTML zwraca HTML, jak wskazuje jego nazwa. Dość często, aby pobrać lub napisać tekst w elemencie, ludzie używają innerHTML. Zamiast tego należy użyć textContent. Ponieważ tekst nie jest analizowany jako HTML, prawdopodobnie będzie miał lepszą wydajność. Ponadto pozwala to uniknąć wektora ataku XSS.

możesz użyć jQuery. dzięki czemu jest to bardzo proste.

po prostu pobierz plik jQuery dodaj jQuery do swojego HTML
lub możesz użyć linku online:

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

i spróbuj tego:

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

Poniższa metoda jest mniej ogólna niż inne, ale jest świetna, gdy masz pewność, że twój ostatni węzeł potomny div jest już węzłem tekstowym. W ten sposób nie utworzysz nowego węzła tekstowego za pomocą 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");

Dlaczego nie skorzystać z setAttribute?

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

Następnie możesz uzyskać te dane:

thisDiv.attrName;

skrypt Java

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

jquery

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

Użyj .html()bez żadnych argumentów, aby zobaczyć, że wpisałeś. Możesz użyć konsoli przeglądarki, aby szybko przetestować te funkcje przed użyciem ich w kodzie.