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

javascript

827037 просмотра

10 ответа

25977 Репутация автора

Я использую AJAX для добавления данных в элемент div, где я заполняю div из JavaScript, как я могу добавить новые данные в div без потери предыдущих данных, найденных в div?

Автор: Adham Источник Размещён: 15.04.2011 01:54

Ответы (10)


540 плюса

117041 Репутация автора

Решение

Попробуй это:

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

div.innerHTML += 'Extra stuff';
Автор: Neal Размещён: 15.04.2011 01:55

324 плюса

68224 Репутация автора

Использование 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>"; 
Автор: Chandu Размещён: 15.04.2011 01:55

17 плюса

560 Репутация автора

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

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

Автор: Thomas Brasington Размещён: 15.04.2011 02:05

117 плюса

6064 Репутация автора

Остерегайтесь 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 )
Автор: BiAiB Размещён: 15.04.2011 02:06

7 плюса

107 Репутация автора

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

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

div.innerHTML += 'Text to append';
Автор: Macfer Ann Размещён: 10.06.2014 04:46

3 плюса

1915 Репутация автора

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

Просто скачайте файл jQuery, добавьте jQuery в свой HTML
или вы можете перейти по ссылке онлайн:

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

и попробуйте это:

 $("#divID").append(data);
Автор: Vishnu Mishra Размещён: 21.07.2015 05:23

55 плюса

1235 Репутация автора

Если вы хотите сделать это быстро и не хотите терять ссылки и слушатели, используйте: .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>
Автор: Milan Rakos Размещён: 23.10.2015 10:02

5 плюса

4077 Репутация автора

Решение 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.

Автор: LGT Размещён: 31.12.2015 09:40

0 плюса

5998 Репутация автора

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

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

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

thisDiv.attrName;
Автор: thatOneGuy Размещён: 18.10.2016 12:29

-1 плюса

188 Репутация автора

сценарий Java

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

JQuery

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

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

Автор: Deepu Sahni Размещён: 10.02.2017 04:01
Вопросы из категории :
32x32