добавить html код в div javascript
Изменение документа
Модификации DOM – это ключ к созданию «живых» страниц.
Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.
Пример: показать сообщение
Создание элемента
DOM-узел можно создать двумя методами:
Создаёт новый элемент с заданным тегом:
Создаёт новый текстовый узел с заданным текстом:
Создание сообщения
В нашем случае сообщение – это div с классом alert и HTML в нём:
Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.
Методы вставки
Вот методы для различных вариантов вставки:
Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:
Наглядная иллюстрация того, куда эти методы вставляют:
Итоговый список будет таким:
Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.
Например, здесь вставляется строка и элемент:
Весь текст вставляется как текст.
Поэтому финальный HTML будет:
Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.
insertAdjacentHTML/Text/Element
Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:
Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».
Так мы можем добавлять произвольный HTML на страницу.
Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.
У метода есть два брата:
Так что, вот альтернативный вариант показа сообщения:
Удаление узлов
Например, сделаем так, чтобы наше сообщение удалялось через секунду:
Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.
Все методы вставки автоматически удаляют узлы со старых мест.
Например, давайте поменяем местами элементы:
Клонирование узлов: cloneNode
Как вставить ещё одно подобное сообщение?
Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).
Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.
Пример копирования сообщения:
DocumentFragment
DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.
Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.
DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:
Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.
Устаревшие методы вставки/удаления
Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.
Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:
Чтобы вставить newLi в начало, мы можем сделать вот так:
Удаляет node из parentElem (предполагается, что он родитель node ).
Несколько слов о «document.write»
Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.
Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.
В современных скриптах он редко встречается из-за следующего важного ограничения:
Вызов document.write работает только во время загрузки страницы.
Если вызвать его позже, то существующее содержимое документа затрётся.
Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.
Это его недостаток.
Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.
Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.
Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.
Итого
Методы для создания узлов:
Вставка и удаление:
Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :
Чтобы добавить HTML на страницу до завершения её загрузки:
После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.
Создание html-элементов в JavaScript
В HTML мы создаём столько элементов, сколько нам нужно, в коде, добавляя и удаляя их по мере изменения страницы в соответствии с psd-макетом или потребностями сайта.
JavaScript также умеет создавать html-элементы. Для этого у него есть несколько методов. Давайте рассмотрим их.
Создание элемента. Метод document.createElement
Метод предназначен для создания тегов, или, иначе, html-элементов. Общий вид:
В этом случае элемент создается только в памяти компьютера и не отображается на странице, пока не будут использованы специальные методы для его вставки в тело документа.
Но, как правило, этого мало. Необходимо, во-первых, задать какой-то текст внутри div-a, а во-вторых, назначить для него css-форматирование либо с помощью класса, либо с помощью id.
Для этого добавим элементу свойство id или className (подразумевается, что css-форматирование для этого id или класса у вас существует):
Что касается текста, то его добавление реализуется 2-мя способами: с помощью свойства innerHTML или метода document.createTextNode():
В первом случае вы можете добавить не только текст, но и любые html-теги.
Обратите внимание на то, что во втором случае придётся не только создать текстовый узел, но и добавить его в качестве дочернего элемента к нашему div-у. Для этого нам понадобился метод appendChild(). Синтаксис его таков:
Поскольку в модели DOM текст считается специальным текстовым узлом (еще есть узлы-элементы и узлы-комментарии), то его нужно добавлять к элементу-родителю, т.е. div-у в нашем примере.
Таким же методом будет добавлен и узел-элемент, созданный с помощью document.createElement(), причем добавляется он в самый конец родительского элемента.
Например, создадим изображение и добавим его внутрь div-а с :
Здесь должна появиться картинка с камнем
Нажмите на кнопочку, пожалуйста.
Обратите внимание, что картинка появилась после текста, т.е. в самом низу родительского элемента.
Если несколько раз нажать на кнопку в примере выше, изображение будет добавлено тоже несколько раз.
Пример использования метода document.createElement() в виде небольшой игры
Все 672 элемента мы добавляем методом appendChild() в совершенно пустой в html-разметке
Центрирование элементов выполнено с помощью Flexbox-модели.
Использование метода insertBefore
Если вам необходимо вставить новый элемент в определенном месте, можно использовать вставку ДО определенного элемента методом insertBefore. Его синтаксис таков:
Пример: вставляем текст абзаца в div с после заголовка h2:
В этом примере firstElementChild, использованный во второй строке, является обращением к первому дочернему элементу div-a с текстом «Пока это первый абзац».
Пока это первый абзац.
Использование метода insertAdjacentHTML и других
Это более универсальный метод, если вам необходимо вставить некий текст (изображение) внутрь другого тега или ДО тега, или ПОСЛЕ него. Для этого существуют специальные строки:
Методов существует 3 разновидности: для добавления текста, html-кода и элемента. Ситаксис этих методов таков:
Использовать их нужно в зависимости от потребности.
Например, вставим текст (вводите каждый раз новый текст в поле, чтобы увидеть разницу):
Место для вставки текста
Код примера (с одним из вариантов строк):
А теперь используем вставку кода html:
Дополняемый список
В последнем примере будем добавлять один из элементов, задавая ему цвет текста случайным образом с помощью функции randomColor() :
Место для вставки элемента
Как и где располагаются элементы, можно посмотреть на скриншоте или попробовать самому 🙂
Замена элемента на другой
Если вы не хотите добавлять новый элемент в структуру уже существующего, вы можете заменить тот, что был на новый методом replaceChild(). Делается это несколько сложновато, т.к. при этом надо обратиться к родительскому элементу (узлу) и указать, что именно внутри него мы меняем на новый элемент какой-то из старых элементов.
Рассмотрим пример, в котором нам нужно заменить первый абзац внутри div-а на заголовок 3-го уровня.
Этот пример в действии:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ipsa sunt fugiat, tenetur cumque atque?
Voluptates facere fugit itaque fuga libero nisi maxime minima, ad molestias magnam. Excepturi, quos, ratione.
Как вы, наверное, заметили, ряд методов несколько сложно воспринимается с точки зрения понимания их синтаксиса. Поэтому в совремненном JavaScript чаще используются другие методы, похожие и по названию, и по действию, но со значительно более понятным синтаксисом.
Новые методы вставки элементов в html-разметку
С внедрением стандартов ES5 и ES6 в JavaScript появились новые методы, упрощающие манипуляции со вставкой элементов в html-разметку страницы. Не последнюю роль в этих нововведениях сыграла библиотека jQuery, т.к. в ней такие методы были реализованы уже очень давно.
В примере ниже вы можете выбрать любой из перечисленных методов и посмотреть, как он работает.
Обратите внимание, что метод replaceWith() заменяет элемент на указанный в скобках другой элемент или строку, и после этого другие методы не работают. Поэтому нажмите на кнопку «Обновить», если хотите еще раз попробовать применить все методы.
Вставка HTML-элементов с помощью JavaScript
вместо утомительного поиска обходных путей для каждого типа атрибута и события при использовании следующего синтаксиса:
есть ли способ, которым я могу просто объявить весь элемент HTML как строку? например:
7 ответов
вместо того, чтобы напрямую связываться с innerHTML было бы лучше создать фрагмент, а затем вставить это:
хотя innerHTML используется в функции, все это происходит за пределами DOM, поэтому это намного быстрее, чем вы думаете.
вы хотите, чтобы этот
‘beforebegin’ Перед самой стихией
‘afterbegin’ Как раз внутри элемента, перед его первым ребенком
‘beforeend’ Только внутри элемента, после его последнего ребенка
‘afterend’ После сам элемент
в старой школе JavaScript вы можете сделать следующее:
в ответ на ваш комментарий:
[. ] Меня интересовало объявление источника атрибутов и событий нового элемента, а не innerHTML элемента.
я перепишу вышеупомянутый пример, чтобы уточнить это:
использование JavaScript framework сделает этот код гораздо менее подробным и улучшит читаемость. Например, jQuery позволяет сделать следующее:
насколько мне известно, что, честно говоря, является довольно новым и ограниченным, единственная потенциальная проблема с этой техникой заключается в том, что вам не удается динамически создавать некоторые элементы таблицы.
Я использую форму для шаблонов, добавляя элементы «template» в скрытый DIV, а затем используя cloneNode(true) для создания клона и добавления его по мере необходимости. Несите в ind, что вам нужно убедиться, что вы повторно назначаете идентификаторы по мере необходимости, чтобы предотвратить дублирование.
Если вы хотите вставить HTML-код внутри тега существующей страницы, Используйте Jnerator. Этот инструмент был создан специально для этой цели.
вместо написания следующего кода
Вы можете написать более понятную структуру
как говорили другие, удобный jQuery добавить функциональность можно эмулировать:
в то время как некоторые говорят, что лучше не «возиться» с innerHTML, он надежен во многих случаях, если вы знаете это:
Как добавить данные в div с помощью JavaScript?
Я использую AJAX для добавления данных в элемент div, где я заполняю div из JavaScript, как я могу добавить новые данные в div без потери предыдущих данных, найденных в div?
10 ответов
Почему бы просто не использовать setAttribute?
Тогда вы можете получить эти данные:
Даже это будет работать:
jquery
Если вы хотите сделать это быстро и не хотите терять ссылки, слушатели используют: .insertAdjacentHTML () ;
Поддерживается всеми основными браузерами (IE6 +, FF8 +, Все остальные и мобильные устройства): http://caniuse.com/#feat=insertadjacenthtml
Использование innerHTML:
Этот подход удалит всех слушателей существующих элементов, упомянутых @BiAiB. Так что будьте осторожны, если вы планируете использовать эту версию.
Решение IE9 + (Vista +) без создания новых текстовых узлов:
Тем не менее, это не совсем помогло мне, так как мне нужно было новую строку после каждого сообщения, поэтому мой DIV превратился в UL с этим кодом:
innerHTML возвращает HTML, как указывает его имя. Довольно часто для извлечения или записи текста внутри элемента люди используют innerHTML. Вместо этого следует использовать textContent. Поскольку текст не анализируется как HTML, он, вероятно, будет иметь более высокую производительность. Кроме того, это позволяет избежать вектора атаки XSS.
Если вам нужно сохранить их (например, когда вы прикрепили обработчик кликов), вам нужно добавить новое содержимое с помощью функций DOM (appendChild, insertAfter, insertBefore):
Вы можете использовать JQuery. которые делают это очень просто.
Просто скачайте файл jQuery и добавьте jQuery в свой HTML
или вы можете пользователь онлайн ссылку:
Добавить html код в div javascript
Возвращает или изменяет html-содержимое выбранных элементов
Получает HTML-содержимое первого элемента в наборе.
htmlString
HTML строка которую нужно вставить в элемент.
function(index, oldhtml)
Заменяет html-содержимое каждого выбранного элемента в наборе на возвращенное функцией function значение. Функция вызывается, для каждого из выбранных элементов.
Данный метод нельзя применять к XML документам.
Данные будут извлечены из первого
Результат будет такой:
Данный метод использует нативное свойство innerHTML. Некоторые браузеры могут возвратить результат не совсем в таком виде, в котором он присутствует на странице. К примеру, Internet Explorer иногда упускает кавычки у значений атрибутов.
Пример:
Преобразуем html в текст, при клике по параграфу.
Возьмём следующий HTML фрагмент:
Данная строчка заменит содержимое элемента
Дан документ с шестью параграфами. Заменим их содержимое с
All new content for 6 paragraphs!
Примеры
Пример: добавляем html каждому из div-ов
Пример: добавляем html каждому из
Связанные уроки:
15 особенностей jQuery 1.4
jQuery постоянно развивается. Релиз версии 1.4 состоялся в январе. jQuery 1.4 получила много новых функций, расширений и имеет значительно лучшую производительность. Данная статья посвящена описанию основных улучшений jQuery 1.4.
Доступ к элементам контента с помощью jQuery
jQuery даёт возможность работать с элементами HTML и их содержимым различными способами. Например, вы можете добавить новые элементы внутрь, вокруг, до и после существующих элементов; вы можете заменить один элемент другим (или другими); вы можете читать и заменять содержимое элементов.