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

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