как в innerhtml вставить 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 на страницу до завершения её загрузки:
После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.
innerHTML что такое как использовать примеры
Все эти вопросы об innerHTML мы рассмотрим на данной страницу.
Каким-то странным образом мы совсем упустили свойство innerHTML в javascript и если вы встречали наш сайт на просторах интернета. То вы знаете, нашу концепцию – минимум теории и максимум практики!
Всё о innerHTML javascript применение примеры использования
Что такое innerHTML!?
Какую часть элемента получает innerHTML схема:
Чтобы увидеть, какую часть получает innerHTML, вот вам картинка, innerHTML будет получать все, что выделено красным.
Какую часть элемента получает innerHTML схема:
Нужно понимать, что мы можем не только заменить данные с помощью innerHTML.
Нои проделать обратное действие получить данные внутри тега.
Самый простой пример использования innerHTML.
Использованный код в примере:
Алгоритм работы innerHTML
В качестве примеров рассмотрим следующие 3 алгоритма:
Получить данные с помощью innerHTML
И последнее : мы должны, что-то сделать с нашими полученными данными, например вывести их с помощью alert.
Чтобы передать данные с помощью innerHTML также существует алгоритм:
Как и в первом случае, мы должны обратиться к тегу в который будем отправлять данные.
И последнее : передаем данные с помощью innerHTML
Опять мы должны обратиться к тегу, ко всем тегам, которые нам нужны.
И последнее : одновременно получаем и передаем данные с помощью innerHTML
Получить содержимое блока с помощью innerHTML и вывести через alert!?
С теорией закончили… надеюсь, с вами произошло тоже самое, что и со мной!
Я ничего не понял! В этом пункте рассмотрим алгоритм №1.
Т.е.
В момент действия получаем данные innerHTML
Выведем полученные данные alert
Чтобы разобраться, нам потребуется пример использования innerHTML.
Пример получения данных с помощью innerHTML
Для этого нам понадобится какой-то блок, пусть это будет div, добавим id :
Чтобы мы его могли увидеть добавим в элемент id example, с бордюром и цветом.
Теперь, чтобы вы могли увидеть вживую работу innerHTML, напишем простой скрипт, использовали:
Теперь можно нажать на кнопку и получить данные с помощью innerHTML
Передать данные внутрь блока с помощью innerHTML.
Открыть их в двух окнах друг против дурга и сравнить и тогда будет понятно, о чем идет речь ниже!.
В момент действия передаем данные innerHTML
Получить данные с помощью innerHTML и передать в другой блок с помощью innerHTML
Открыть их в двух окнах друг против дурга и сравнить и тогда будет понятно, о чем идет речь ниже!.
В момент действия получим и передаем данные innerHTML
Возьмем предыдущий пункт, добавим еще один блок div:
Обратимся к нему также как и раньше через querySelector
И в функцию введем некоторые изменения:
А в другой блок будем полученное вставлять тоже через innerHTML:
Сообщение системы комментирования :
Форма пока доступна только админу. скоро все заработает. надеюсь.
Лучший способ вставить 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, содержащий данные, которые вы хотите отобразить
добавьте это к любому элементу, который вам нравится
Вы можете узнать больше о строковых литералах здесь
Can scripts be inserted with innerHTML?
I tried to load some scripts into a page using innerHTML on a
This is documented in the HTML5 spec:
Note: script elements inserted using innerHTML do not execute when they are inserted.
But beware, this doesn’t mean innerHTML is safe from cross-site scripting. It is possible to execute JavaScript via innerHTML without using tags as illustrated on MDN’s innerHTML page.
Solution: Dynamically adding scripts
To dynamically add a script tag, you need to create a new script element and append it to the target element.
You can do this for external scripts:
And inline scripts:
NOTE: ES6 used
The function accepts 3 parameters :
I’ve created an example that lets you run a string as a script and get the ‘exports’ of the script returned through a promise:
I’ve simplified this from my actual implementation, so no promises that there aren’t any bugs in it. But the principle works.
If you don’t care about getting any value back after the script runs, it’s even easier; just leave out the Promise and onload bits. You don’t even need to wrap the script or create the global window.__load_script_exports_ property.