Як додати дані до 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 :

Відмінності від InternalHTML

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

Наступний метод менш загальний, ніж інші, але він чудовий, коли ви впевнені, що ваш останній дочірній вузол діва вже текстовий вузол. Таким чином, ви не створите новий текстовий вузол, використовуючи appendData довідник MDN Додаток

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()без жодних аргументів, щоб побачити, що ви ввели. За допомогою консолі браузера можна швидко перевірити ці функції, перш ніж використовувати їх у своєму коді.