в javascript вставить html код в
Изменение документа
Модификации 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 как строку? например:
7 ответов
вместо того, чтобы напрямую связываться с innerHTML было бы лучше создать фрагмент, а затем вставить это:
хотя innerHTML используется в функции, все это происходит за пределами DOM, поэтому это намного быстрее, чем вы думаете.
вы хотите, чтобы этот
‘beforebegin’ Перед самой стихией
‘afterbegin’ Как раз внутри элемента, перед его первым ребенком
‘beforeend’ Только внутри элемента, после его последнего ребенка
‘afterend’ После сам элемент
в старой школе JavaScript вы можете сделать следующее:
в ответ на ваш комментарий:
[. ] Меня интересовало объявление источника атрибутов и событий нового элемента, а не innerHTML элемента.
я перепишу вышеупомянутый пример, чтобы уточнить это:
использование JavaScript framework сделает этот код гораздо менее подробным и улучшит читаемость. Например, jQuery позволяет сделать следующее:
насколько мне известно, что, честно говоря, является довольно новым и ограниченным, единственная потенциальная проблема с этой техникой заключается в том, что вам не удается динамически создавать некоторые элементы таблицы.
Я использую форму для шаблонов, добавляя элементы «template» в скрытый DIV, а затем используя cloneNode(true) для создания клона и добавления его по мере необходимости. Несите в ind, что вам нужно убедиться, что вы повторно назначаете идентификаторы по мере необходимости, чтобы предотвратить дублирование.
Если вы хотите вставить HTML-код внутри тега существующей страницы, Используйте Jnerator. Этот инструмент был создан специально для этой цели.
вместо написания следующего кода
Вы можете написать более понятную структуру
как говорили другие, удобный jQuery добавить функциональность можно эмулировать:
в то время как некоторые говорят, что лучше не «возиться» с innerHTML, он надежен во многих случаях, если вы знаете это:
Создание 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 на лету, используя JS (без библиотек):
с помощью javascript. Я знаю, что могу сделать это с помощью createElement и т.д., Но, похоже, очень сложно сделать это для каждого элемента. Может ли кто-нибудь предложить способ сделать это с большей кратностью.
У меня нет доступа к библиотеке в этом проекте…. поэтому нет jquery и т.д.
Переместите всю вещь в переменную JS:
Сохраняйте разметку отдельно от вашего кода:
Вы можете вставлять фрагменты HTML, которые вы будете использовать в качестве скрытых шаблонов внутри вашей HTML-страницы, и клонировать их по запросу:
В качестве альтернативы вы можете действовать в HTML-шаблоне:
Вы можете использовать
Теперь с помощью Web Components вы можете вводить HTML, используя импорт HTML.
Синтаксис выглядит так:
Чтобы добавить это из JavaScript, вы можете сделать что-то вроде:
На момент написания этой статьи Chrome и Opera поддерживают импорт HTML. Вы можете увидеть обновленную таблицу совместимости здесь http://caniuse.com/#feat=imports
Но не беспокойтесь о браузерах, которые его не поддерживают, вы можете использовать его в любом случае с помощью webcomponentsjs polyfill.
Для получения дополнительной информации о проверке импорта HTML http://webcomponents.org/articles/introduction-to-html-imports/
Если вам не нужна какая-либо проверка вашего синтаксиса (это то, что делает createElement() настолько приятным), вы всегда можете по умолчанию просто установить innerHTML свойство элемента, в который вы хотите вставить свою разметку внутри.
Вы можете объединить необработанные строки HTML (чтобы избежать текста и предотвратить отверстия XSS), или вы можете переписать jQuery (или что-то подобное)
Если производительность является проблемой, держитесь подальше от innerHTML. Вы должны создать все дерево объектов с помощью document.createElement() столько раз, сколько необходимо, в том числе для вложенных элементов.
Наконец, добавьте его в документ с одним утверждением, не так много утверждений.
В моем неформальном тестировании на протяжении многих лет это даст вам лучшую производительность (некоторые браузеры могут отличаться).
Если HTML всегда объявляется в переменной, он должен быть простым и для очень конкретной цели. Обычно это неправильный подход.
У меня есть ситуация, когда я передаю текст в стороннюю библиотеку, но если моя модель isPrivate, я бы хотел добавить элемент в текст.
Это создает проблемы с тем, как сторонняя библиотека создает свою разметку.
Это никогда не бывает хорошей идеей, но существуют сторонние библиотеки, поэтому нам не нужно писать все сами. В такой ситуации вы должны полагаться на прохождение разметки, хотя javascript.
Когда я найду подходящее решение для этого, я дам вам обновление
Если вы живете в 2019 году и далее, читайте здесь.
В JavaScript es6 вы можете использовать строковые литералы для создания шаблонов.
создайте функцию, которая возвращает строковый/шаблонный литерал
Создайте объект JSON, содержащий данные, которые вы хотите отобразить
добавьте это к любому элементу, который вам нравится
Вы можете узнать больше о строковых литералах здесь
Введение в HTML импорты
Template, Shadow DOM, и Custom Elements позволяют вам строить UI компоненты проще и быстрее. Однако, это не самый эффективный способ загрузки ресурсов HTML, CSS и JavaScript по отдельности.
Для загрузки библиотек типа jQuery UI или Bootstrap требуются отдельные тэги для JavaScript, CSS, и Web шрифтов. Все становится проще при использовании Web Components с несколькими зависимостями.
HTML импорты позволяют загружать ресурсы как совокупность нескольких файлов этого типа.
Предлагаю вам ознакомиться с видео по данной теме.
Использование HTML импортов
Вы можете загружать любые ресурсы, включая скрипты, таблицы стилей и шрифты:
component.html
Порядок исполнения
Браузеры обрабатывают контент по порядку. Это означает, что script в начале HTML будет загружен раньше, чем то же самое, но в конце. Учтите, что некоторые браузеры ожидают завершения исполнения скрипта перед тем, как загружать следующие элементы.
Во избежание блокировки тэгом script оставшегося HTML можно использовать атрибуты async / defer (также можно переместить все скрипты в конец страницы). defer указывает на то, что код можно запустить лишь после загрузки HTML. async позволяет браузеру выполнять эти два действия параллельно.
Итак, как же работают импорты?
За рамками происходящего
На самом деле, HTML импорты не могут перенести полностью файл с другого источника. К примеру, вы не можете импортировать в http://example.com/ страницу http://webcomponents.org/.
Чтобы избежать этого ограничения, используйте CORS (Cross Origin Resource Sharing). Чтобы узнать больше об этой технологии, прочтите эту статью.
Объекты window и document в импортируемых файлах
Ранее я упоминал то, что импортируемые JavaScript будут запущены на странице. К сожалению, такое нельзя сказать об импортируемых HTML файлах. Чтобы такое происходило и с ними, надо дописать немножко скриптов.
Остерегайтесь того, что объект document в импортируемом файле будет ссылаться на страницу оригинала.
Внесем небольшие изменения в наши файлы.
index.html
Вопросы производительности
Один из плюсов использования импортов — возможность самостоятельно распределить нагрузку страницы и порядок обработки импортируемых объектов. Но это еще и означает, что HTML код увеличится. Вообще, есть несколько пунктов для сравнения:
Зависимости
Что делать, если несколько вставляемых документов ссылаются на одну и ту же библиотеку? Например:
Вы загружаете jQuery в обоих документах, из-за чего при импорте этих документов библиотека в конечном документе будет исполнена дважды.
index.html
Данная проблема крайне легко решается в импортах.
К счастью, нам на помощь идет инструмент под названием «Vulcanize».
Объединение сетевых запросов
Для объединения файлов index.html используем следующий код:
Прочитать больше о данном инструменте можно здесь.
Сочетание импортов с Template, Shadow DOM и Custom Elements
Поддерживаемые браузеры
HTML импорты поддерживаются браузерами Chrome и Opera. Firefox на данный момент отложил добавление данной фичи, так как «у них есть более приоритетные задачи».