Вставить html из файла js

Обновлено: 30.06.2024

вместо утомительного поиска обходных путей для каждого типа атрибута и события при использовании следующего синтаксиса:

есть ли способ, которым я могу просто объявить весь элемент HTML как строку? например:

вместо того, чтобы напрямую связываться с innerHTML было бы лучше создать фрагмент, а затем вставить это:

вы можете использовать собственные методы DOM для вставки, такие как insertBefore, appendChild и т. д.
у вас есть доступ к фактическим узлам DOM до их вставки; вы можете получить доступ к объекту childNodes фрагмента.
использование фрагментов документа очень быстро; быстрее, чем создание элементов вне DOM и в некоторых ситуациях быстрее, чем innerHTML.

хотя innerHTML используется в функции, все это происходит за пределами DOM, поэтому это намного быстрее, чем вы думаете.

вы хотите, чтобы этот

позиция - это положение относительно элемента, который вы вставляете рядом с:

'beforebegin' Перед самой стихией

'afterbegin' Как раз внутри элемента, перед его первым ребенком

'beforeend' Только внутри элемента, после его последнего ребенка

'afterend' После сам элемент

в старой школе JavaScript вы можете сделать следующее:

в ответ на ваш комментарий:

[. ] Меня интересовало объявление источника атрибутов и событий нового элемента, а не innerHTML элемента.

вам нужно ввести новый HTML в DOM, хотя; вот почему innerHTML используется в Примере JavaScript старой школы. The innerHTML на BODY элемент добавляется с новым HTML. Мы не касаясь существующего HTML внутри BODY .

я перепишу вышеупомянутый пример, чтобы уточнить это:

использование JavaScript framework сделает этот код гораздо менее подробным и улучшит читаемость. Например, jQuery позволяет сделать следующее:

насколько мне известно, что, честно говоря, является довольно новым и ограниченным, единственная потенциальная проблема с этой техникой заключается в том, что вам не удается динамически создавать некоторые элементы таблицы.

Я использую форму для шаблонов, добавляя элементы "template" в скрытый DIV, а затем используя cloneNode(true) для создания клона и добавления его по мере необходимости. Несите в ind, что вам нужно убедиться, что вы повторно назначаете идентификаторы по мере необходимости, чтобы предотвратить дублирование.

Если вы хотите вставить HTML-код внутри тега существующей страницы, Используйте Jnerator. Этот инструмент был создан специально для этой цели.

вместо написания следующего кода

Вы можете написать более понятную структуру

как говорили другие, удобный jQuery добавить функциональность можно эмулировать:

в то время как некоторые говорят, что лучше не "возиться" с innerHTML, он надежен во многих случаях, если вы знаете это:

Модификации DOM – это ключ к созданию «живых» страниц.

Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

Создание элемента

DOM-узел можно создать двумя методами:

Создаёт новый элемент с заданным тегом:

Создаёт новый текстовый узел с заданным текстом:

Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .

Для этого есть метод append , в нашем случае: document.body.append(div) .

Вот полный пример:

Вот методы для различных вариантов вставки:

node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
node.before(. nodes or strings) –- вставляет узлы или строки до node ,
node.after(. nodes or strings) –- вставляет узлы или строки после node ,
node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.

Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .

Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?

insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .

Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:

"beforebegin" – вставить html непосредственно перед elem ,
"afterbegin" – вставить html в начало elem ,
"beforeend" – вставить html в конец elem ,
"afterend" – вставить html непосредственно после elem .

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

Так мы можем добавлять произвольный HTML на страницу.

Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.

У метода есть два брата:

elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.

Удаление узлов

Для удаления узла есть методы node.remove() .

Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

Все методы вставки автоматически удаляют узлы со старых мест.

Например, давайте поменяем местами элементы:

Клонирование узлов: cloneNode

Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).

Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.

DocumentFragment

DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.

Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

Например, getListContent ниже генерирует фрагмент с элементами <li> , которые позже вставляются в <ul> :

Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:

DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:

Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.

Устаревшие методы вставки/удаления

Эта информация помогает понять старые скрипты, но не нужна для новой разработки.

Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет node в конец дочерних элементов parentElem .

Следующий пример добавляет новый <li> в конец <ol> :

Вставляет node перед nextSibling в parentElem .

Следующий пример вставляет новый элемент перед вторым <li> :

Чтобы вставить newLi в начало, мы можем сделать вот так:

Заменяет oldChild на node среди дочерних элементов parentElem .

Удаляет node из parentElem (предполагается, что он родитель node ).

Этот пример удалит первый <li> из <ol> :

Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .

Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

Вызов document.write работает только во время загрузки страницы.

Если вызвать его позже, то существующее содержимое документа затрётся.

Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

Это его недостаток.

Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.

Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.

Итого

Методы для создания узлов:

document.createElement(tag) – создаёт элемент с заданным тегом,
document.createTextNode(value) – создаёт текстовый узел (редко используется),
elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.

Вставка и удаление:

node.append(. nodes or strings) – вставляет в node в конец,
node.prepend(. nodes or strings) – вставляет в node в начало,
node.before(. nodes or strings) – вставляет прямо перед node ,
node.after(. nodes or strings) – вставляет сразу после node ,
node.replaceWith(. nodes or strings) – заменяет node .
node.remove() – удаляет node .

parent.appendChild(node)
parent.insertBefore(node, nextSibling)
parent.removeChild(node)
parent.replaceChild(newElem, node)

Все эти методы возвращают node .

Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :

"beforebegin" – вставляет html прямо перед elem ,
"afterbegin" – вставляет html в elem в начало,
"beforeend" – вставляет html в elem в конец,
"afterend" – вставляет html сразу после elem .

Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.

Чтобы добавить HTML на страницу до завершения её загрузки:

После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.

Я надеюсь, что это не слишком субъективно. Я чувствую, что есть окончательный ответ, вот так.

Я хочу создать этот html на лету, используя JS (без библиотек):

с помощью javascript. Я знаю, что могу сделать это с помощью createElement и т.д., Но, похоже, очень сложно сделать это для каждого элемента. Может ли кто-нибудь предложить способ сделать это с большей кратностью.

Переместите всю вещь в переменную JS:

если вы хотите: N:

Сохраняйте разметку отдельно от вашего кода:

Вы можете вставлять фрагменты HTML, которые вы будете использовать в качестве скрытых шаблонов внутри вашей HTML-страницы, и клонировать их по запросу:

Обновление. Обратите внимание, что я преобразовал атрибуты id в шаблон в атрибуты class . Это делается для того, чтобы на вашей странице не было нескольких элементов с одинаковыми идентификаторами. Возможно, вам даже не нужны классы. Вы можете получить доступ к элементам с помощью:

В качестве альтернативы вы можете действовать в HTML-шаблоне:

Вы можете использовать

Теперь с помощью Web Components вы можете вводить HTML, используя импорт HTML.

Синтаксис выглядит так:

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

Чтобы добавить это из JavaScript, вы можете сделать что-то вроде:

Но не беспокойтесь о браузерах, которые его не поддерживают, вы можете использовать его в любом случае с помощью webcomponentsjs polyfill.

Если вам не нужна какая-либо проверка вашего синтаксиса (это то, что делает createElement() настолько приятным), вы всегда можете по умолчанию просто установить innerHTML свойство элемента, в который вы хотите вставить свою разметку внутри.

Лично я хотел бы использовать createElement() . Это более подробно, но есть гораздо меньше проблем, чтобы беспокоиться об этом.

Вы можете объединить необработанные строки HTML (чтобы избежать текста и предотвратить отверстия XSS), или вы можете переписать jQuery (или что-то подобное)

Если производительность является проблемой, держитесь подальше от innerHTML. Вы должны создать все дерево объектов с помощью document.createElement() столько раз, сколько необходимо, в том числе для вложенных элементов.

Наконец, добавьте его в документ с одним утверждением, не так много утверждений.

В моем неформальном тестировании на протяжении многих лет это даст вам лучшую производительность (некоторые браузеры могут отличаться).

Если HTML всегда объявляется в переменной, он должен быть простым и для очень конкретной цели. Обычно это неправильный подход.

У меня есть ситуация, когда я передаю текст в стороннюю библиотеку, но если моя модель isPrivate, я бы хотел добавить элемент в текст.

Это создает проблемы с тем, как сторонняя библиотека создает свою разметку.

Это никогда не бывает хорошей идеей, но существуют сторонние библиотеки, поэтому нам не нужно писать все сами. В такой ситуации вы должны полагаться на прохождение разметки, хотя javascript.

Когда я найду подходящее решение для этого, я дам вам обновление

Если вы живете в 2019 году и далее, читайте здесь.

В JavaScript es6 вы можете использовать строковые литералы для создания шаблонов.

создайте функцию, которая возвращает строковый/шаблонный литерал

Если Вы научились манипулировать положением элементов на странице (см. заметки "Действия с элементами - . "), то дальше нужно знать, как добавить текст или HTML-код непосредственно в элементы?

Работая с примером 2.1 из прошлой статьи, мы имели дело с простым элементом , у которого есть оболочка - это тег div и какое-то оформление - это класс black . Больше ничего этот элемент не содержит.

Здесь мы продолжим работать с тегом div - будем его редактировать. Допустим нам нужно вписать в него какой-то текст. Как это сделать?

Для этого существует два метода: innerHTML и textContent. А также метод insertAdjacentHTML, который позволяет вставить текст или код в любое место страницы .

Метод innerHTML - Вставка текста

Метод innerHTML позволяет вставить текст.

Результат в Браузере

В тег div добавили текст Hello world .

Метод innerHTML - Вставка HTML-кода

Метод innerHTML позволяет вставить HTML-код.

Продолжим работать с предыдущим примером.

Результат в Браузере

Текст Hello world заключили в заголовок h1 ("Hello world" теперь не умещается в область тега div) .

Метод textContent - Вставка текста

Метод textContent позволяет вставить текст.

Результат в Браузере

В отличии от метода innerHTML - метод textContent работает только с текстом .

Если при помощи метода textContent пробовать вставить код, то он будет преобразован в строку.

Метод insertAdjacentHTML

Напоследок ответим на вопрос, как вставить HTML-код перед или после определенных тегов? Для этого существует метод insertAdjacentHTML.

Метод insertAdjacentHTML позволяет вставить HTML-код в любое место страницы.

Синтаксис метода insertAdjacentHTML

Сначала указывается элемент, относительно которого проводятся действия, и который называется опорным элементом.

опорный элемент.insertAdjacentHTML( "ключевое слово" , "код" );

Метод insertAdjacentHTML принимает два аргумента : первый - это одно из ключевых слов: afterbegin, afterend, beforebegin или beforeend. Второй аргумент метода insertAdjacentHTML - это HTML-код, который мы хотим вставить.

Результат в Браузере

Результат в консоли

Вот так при помощи метода insertAdjacentHTML происходит вставка HTML-кода в любое место страницы относительно опорного элемента.

Читайте также: