js вставить html код после элемента
Вставка 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, он надежен во многих случаях, если вы знаете это:
Изменение документа
Модификации 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 на страницу до завершения её загрузки:
После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.
Мультивставка: insertAdjacentHTML и DocumentFragment
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.
Обычные методы вставки работают с одним узлом. Но есть и способы вставлять множество узлов одновременно.
Оптимизация вставки в документ
Есть две возможных последовательности:
Сначала вставить UL в документ, а потом добавить к нему LI :
Полностью создать список «вне DOM», а потом – вставить в документ:
Как ни странно, между этими последовательностями есть разница. В большинстве браузеров, второй вариант – быстрее.
Почему же? Иногда говорят: «потому что браузер перерисовывает каждый раз при добавлении элемента». Это не так. Дело вовсе не в перерисовке.
Браузер достаточно «умён», чтобы ничего не перерисовывать понапрасну. В большинстве случаев процессы перерисовки и сопутствующие вычисления будут отложены до окончания работы скрипта, и на тот момент уже совершенно без разницы, в какой последовательности были изменены узлы.
Тем не менее, при вставке узла происходят разные внутренние события и обновления внутренних структур данных, скрытые от наших глаз.
Что именно происходит – зависит от конкретной, внутренней браузерной реализации DOM, но это отнимает время. Конечно, браузеры развиваются и стараются свести лишние действия к минимуму.
Бенчмарк
Чтобы легко проверить текущее состояние дел – вот два бенчмарка.
При этом первый вставляет все в документ тут же, второй – задерживает вставку TBODY в документ до конца процесса.
Кликните, чтобы запустить.
Код для тестов находится в файле insert-bench.js.
Добавление множества узлов
Продолжим работать со вставкой узлов.
Если новые элементы пришли в виде строки, то можно попробовать добавить их так:
А если нужно вставить в середину списка? Здесь innerHTML вообще не поможет.
insertAdjacent*
Метод insertAdjacentHTML позволяет вставлять произвольный HTML в любое место документа, в том числе и между узлами!
Строка HTML, которую нужно вставить
Куда по отношению к elem вставлять строку. Всего четыре варианта:
У этого метода есть «близнецы-братья»:
DocumentFragment
Оптимизация, о которой здесь идёт речь, важна в первую очередь для старых браузеров, включая IE9-. В современных браузерах эффект от неё, как правило, небольшой, а иногда может быть и отрицательным.
До этого мы говорили о вставке строки в DOM. А что делать в случае, когда надо в существующий UL вставить много DOM-элементов?