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

Ответ 1

Попробуйте следующее:

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

div.innerHTML += 'Extra stuff';

Ответ 2

Использование 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>"; 

Ответ 3

Остерегайтесь 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 )

Ответ 4

Если вы хотите сделать это быстро и не хотите потерять ссылки и слушатели, используйте: .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>

Ответ 5

Если вы используете jQuery, вы можете использовать $('#mydiv').append('html content'), и он сохранит существующий контент.

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

Ответ 6

Даже это будет работать:

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

div.innerHTML += 'Text to append';

Ответ 7

вы можете использовать jQuery. которые делают его очень простым.

просто загрузите файл jQuery, добавьте jQuery в свой HTML файл

или вы можете использовать онлайн-ссылку:

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

и попробуйте следующее:

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

Ответ 8

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);
div.appendChild(li);

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

Отличия от innerHTML

innerHTML возвращает HTML, как указывает его имя. Довольно часто для извлечения или записи текста внутри элемента люди используют innerHTML. Вместо этого следует использовать textContent. Поскольку текст не анализируется как HTML, он, вероятно, имеет лучшую производительность. Более того, это позволяет избежать атаки XSS-атак.

Ответ 9

Почему бы просто не использовать setAttribute?

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

Затем вы можете получить эти данные:

thisDiv.attrName;

Ответ 10

java script

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

JQuery

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

Используйте .html() без каких-либо аргументов, чтобы увидеть, что вы ввели. Вы можете использовать консоль браузера, чтобы быстро протестировать эти функции, прежде чем использовать их в своем коде.