Как добавить данные в div с помощью JavaScript?

Я использую AJAX для добавления данных в элемент div, где я заполняю div из JavaScript, как я могу добавить новые данные в 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 () ;

«Он не выполняет повторный анализ элемента, на котором он используется, и, следовательно, он не повреждает существующие элементы внутри элемента. Это и отсутствие дополнительного шага сериализации делают его намного быстрее, чем прямые манипуляции с внутренним HTML».

Поддерживается всеми основными браузерами (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 уже является текстовым узлом. Таким образом, вы не будете создавать новый текстовый узел, используя 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");

Почему бы просто не использовать 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()без каких-либо аргументов, чтобы увидеть, что вы ввели. Вы можете использовать консоль браузера для быстрого тестирования этих функций, прежде чем использовать их в своем коде.