Как добавить данные в div с помощью JavaScript?
827037 просмотра
10 ответа
Я использую AJAX для добавления данных в элемент div, где я заполняю div из JavaScript, как я могу добавить новые данные в div без потери предыдущих данных, найденных в div?
Автор: Adham Источник Размещён: 12.11.2019 09:54Ответы (10)
540 плюса
Попробуй это:
var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';
Автор: Neal
Размещён: 15.04.2011 01:55
324 плюса
Использование 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
117 плюса
Остерегайтесь 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
55 плюса
Если вы хотите сделать это быстро и не хотите терять ссылки и слушатели, используйте: .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
17 плюса
Если вы используете jQuery, вы можете использовать $('#mydiv').append('html content')
его, и он сохранит существующий контент.
7 плюса
Даже это будет работать:
var div = document.getElementById('divID');
div.innerHTML += 'Text to append';
Автор: Macfer Ann
Размещён: 10.06.2014 04:46
5 плюса
Решение 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 :
Автор: LGT Размещён: 31.12.2015 09:40Отличия от innerHTML
innerHTML возвращает HTML, как указывает его имя. Довольно часто для извлечения или записи текста внутри элемента люди используют innerHTML. Вместо этого следует использовать textContent. Поскольку текст не анализируется как HTML, он, вероятно, будет иметь более высокую производительность. Кроме того, это позволяет избежать вектора атаки XSS.
3 плюса
Вы можете использовать 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
0 плюса
Почему бы просто не использовать setAttribute?
thisDiv.setAttribute('attrName','data you wish to append');
Тогда вы можете получить эти данные:
thisDiv.attrName;
Автор: thatOneGuy
Размещён: 18.10.2016 12:29
-1 плюса
сценарий Java
document.getElementById("divID").html("this text will be added to div");
JQuery
$("#divID").html("this text will be added to div");
Используйте .html()
без каких-либо аргументов, чтобы увидеть, что вы ввели. Вы можете использовать консоль браузера для быстрого тестирования этих функций, прежде чем использовать их в своем коде.
Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- javascript Скрипт входа со скрытыми кнопками
- javascript Как автоматически изменить размер текстовой области с помощью Prototype?
- javascript Удаление элементов с помощью Array.map в JavaScript
- javascript Прокрутка переполненных DIV с помощью JavaScript
- javascript API Карт Google - проблемы с классом GLatLngBounds
- javascript Проверка десятичных чисел в JavaScript - IsNumeric ()
- javascript Как я могу украсить код JavaScript с помощью командной строки?
- javascript Динамически загружать файл JavaScript
- javascript Экранирование строк HTML с помощью jQuery
- javascript Обнаружение неопределенного свойства объекта
- javascript Как сравнить HTML-сущность с JQuery
- javascript Есть ли HTML напротив <noscript>?
- javascript Есть ли функция "существует" для jQuery?
- javascript Как заставить клиентов обновлять файлы JavaScript?
- javascript Замена n-го экземпляра совпадения с регулярным выражением в Javascript
- javascript Сделать окно браузера мигающим в панели задач