Как вставить html в js

Метод insertAdjacentHTML

Метод insertAdjacentHTML позволяет вставить строку HTML кода в любое место страницы. Код вставляется относительно опорного элемента. Можно сделать вставку перед опорным элементом (способ вставки ‘beforeBegin’ ), после него (способ вставки ‘afterEnd’ ), а также в начало (способ вставки ‘afterBegin’ ) или в конец (способ вставки ‘beforeEnd’ ) опорного элемента.

Синтаксис

опорный элемент.insertAdjacentHTML(способ вставки, код для вставки);

Пример . Способ beforeBegin

Пусть опорный элемент — это элемент #target . Вставим перед ним новый абзац:

let target = document.querySelector(‘#target’); target.insertAdjacentHTML(‘beforeBegin’, ‘

!

‘);

Результат выполнения кода:

Пример . Способ afterEnd

А теперь вставим новый абзац после опорного элемента:

let target = document.querySelector(‘#target’); target.insertAdjacentHTML(‘afterEnd’, ‘

!

‘);

Результат выполнения кода:

Пример . Способ afterBegin

Вставим новый абзац в начало опорного элемента:

let target = document.querySelector(‘#target’); target.insertAdjacentHTML(‘afterBegin’, ‘

!

‘);

Результат выполнения кода:

Пример . Способ beforeEnd

Вставим новый абзац в конец опорного элемента:

let target = document.querySelector(‘#target’); target.insertAdjacentHTML(‘beforeEnd’, ‘

!

‘);

Результат выполнения кода:

Смотрите также

• метод insertAdjacentText ,
  который вставляет текст в заданное место
• метод insertAdjacentElement ,
  который вставляет элемент в заданное место
• метод prepend ,
  который вставляет элементы в начало
• метод append ,
  который вставляет элементы в конец
• метод appendChild ,
  который вставляет элементы в конец родителя
• метод insertBefore ,
  который вставляет элементы перед элементом

Мультивставка: insertAdjacentHTML и DocumentFragment

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

Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.

Обычные методы вставки работают с одним узлом. Но есть и способы вставлять множество узлов одновременно.

Оптимизация вставки в документ

Рассмотрим задачу: сгенерировать список UL/LI .

Есть две возможных последовательности:

Сначала вставить UL в документ, а потом добавить к нему LI :

var ul = document.createElement('ul'); document.body.appendChild(ul); // сначала в документ for (. ) ul.appendChild(li); // потом узлы

var ul = document.createElement('ul'); for(. ) ul.appendChild(li); // сначала вставить узлы document.body.appendChild(ul); // затем в документ

Как ни странно, между этими последовательностями есть разница. В большинстве браузеров, второй вариант – быстрее.

Почему же? Иногда говорят: «потому что браузер перерисовывает каждый раз при добавлении элемента». Это не так. Дело вовсе не в перерисовке.

Браузер достаточно «умён», чтобы ничего не перерисовывать понапрасну. В большинстве случаев процессы перерисовки и сопутствующие вычисления будут отложены до окончания работы скрипта, и на тот момент уже совершенно без разницы, в какой последовательности были изменены узлы.

Тем не менее, при вставке узла происходят разные внутренние события и обновления внутренних структур данных, скрытые от наших глаз.

Что именно происходит – зависит от конкретной, внутренней браузерной реализации DOM, но это отнимает время. Конечно, браузеры развиваются и стараются свести лишние действия к минимуму.

Бенчмарк

Чтобы легко проверить текущее состояние дел – вот два бенчмарка.

Оба они создают таблицу 20×20, наполняя TBODY элементами TR/TD .

При этом первый вставляет все в документ тут же, второй – задерживает вставку TBODY в документ до конца процесса.

Кликните, чтобы запустить.

Код для тестов находится в файле insert-bench.js.

Добавление множества узлов

Продолжим работать со вставкой узлов.

Рассмотрим случай, когда в документе уже есть большой список UL . И тут понадобилось срочно добавить ещё 20 элементов LI .

Как это сделать?

Если новые элементы пришли в виде строки, то можно попробовать добавить их так:

Но операцию ul.innerHTML += «. » можно по-другому переписать как ul.innerHTML = ul.innerHTML + «. » . Иначе говоря, она не прибавляет, а заменяет всё содержимое списка на дополненную строку. Это и нехорошо с точки зрения производительности, но и будут побочные эффекты. В частности, все внешние ресурсы (картинки) внутри перезаписываемого innerHTML будут загружены заново. Если в каких-то переменных были ссылки на элементы списка – они станут неверны, так как содержимое полностью заменяется. В общем, так лучше не делать.

А если нужно вставить в середину списка? Здесь innerHTML вообще не поможет.

Можно, конечно, вставить строку во временный DOM-элемент и перенести оттуда элементы, но есть и гораздо лучший вариант: метод insertAdjacentHTML !

insertAdjacent*

Метод insertAdjacentHTML позволяет вставлять произвольный HTML в любое место документа, в том числе и между узлами!

elem.insertAdjacentHTML(where, html);

Строка HTML, которую нужно вставить

Куда по отношению к elem вставлять строку. Всего четыре варианта:

1. beforeBegin – перед elem .
2. afterBegin – внутрь elem , в самое начало.
3. beforeEnd – внутрь elem , в конец.
4. afterEnd – после elem .

• 1
• 2
• 5

У этого метода есть «близнецы-братья»:

• elem.insertAdjacentElement(where, newElem) – вставляет в произвольное место не строку HTML, а элемент newElem .
• elem.insertAdjacentText(where, text) – создаёт текстовый узел из строки text и вставляет его в указанное место относительно elem .

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

DocumentFragment

Важно для старых браузеров

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

До этого мы говорили о вставке строки в DOM. А что делать в случае, когда надо в существующий UL вставить много DOM-элементов?

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

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

Синтаксис для его создания:

var fragment = document.createDocumentFragment();

В него можно добавлять другие узлы.

fragment.appendChild(node);

Его можно клонировать:

fragment.cloneNode(true); // клонирование с подэлементами

У DocumentFragment нет обычных свойств DOM-узлов, таких как innerHTML , tagName и т.п. Это не узел.

Его «Фишка» заключается в том, что когда DocumentFragment вставляется в DOM – то он исчезает, а вместо него вставляются его дети. Это свойство является уникальной особенностью DocumentFragment .

Например, если добавить в него много LI , и потом вызвать ul.appendChild(fragment) , то фрагмент растворится, и в DOM вставятся именно LI , причём в том же порядке, в котором были во фрагменте.

// хотим вставить в список UL много LI // делаем вспомогательный DocumentFragment var fragment = document.createDocumentFragment(); for (цикл по li) < fragment.appendChild(list[i]); // вставить каждый LI в DocumentFragment >ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка

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

Понять текущее положение вещей вы можете, запустив следующий небольшой бенчмарк.

append/prepend, before/after, replaceWith

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

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

Эти методы ничего не возвращают.

Во всех этих методах nodes – DOM-узлы или строки, в любом сочетании и количестве. Причём строки вставляются именно как текстовые узлы, в отличие от insertAdjacentHTML .

Пример (с полифилом):

Итого

• Манипуляции, меняющие структуру DOM (вставка, удаление элементов), как правило, быстрее с отдельным маленьким узлом, чем с большим DOM, который находится в документе. Конкретная разница зависит от внутренней реализации DOM в браузере.
• Семейство методов для вставки HTML/элемента/текста в произвольное место документа:
  • elem.insertAdjacentHTML(where, html)
  • elem.insertAdjacentElement(where, element)
  • elem.insertAdjacentText(where, text)
  • append/prepend – вставка в конец/начало.
  • before/after – вставка перед/после.
  • replaceWith – замена.

  Задачи

  Отсортировать таблицу

  важность: 5

  Имя	Фамилия	Отчество	Возраст
  Вася	Петров	Александрович	10
  Петя	Иванов	Петрович	15
  Владимир	Ленин	Ильич	9
  .	.	.	.

  Строк в таблице много: может быть 20, 50, 100… Есть и другие элементы в документе.

  Как бы вы предложили отсортировать содержимое таблицы по полю Возраст ? Обдумайте алгоритм, реализуйте его.

  Как сделать, чтобы сортировка работала как можно быстрее? А если в таблице 10000 строк (бывает и такое)?

  P.S. Может ли здесь помочь DocumentFragment ?

  P.P.S. Если предположить, что у нас заранее есть массив данных для таблицы в JavaScript – что быстрее: отсортировать эту таблицу или сгенерировать новую?

  Для сортировки нам поможет функция sort массива.

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

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

  P.S. Создавать DocumentFragment здесь ни к чему. Можно вытащить из документа TBODY и иметь дело с ним в отрыве от DOM (алгоритм 4).

  P.P.S. Если нужно сделать много узлов, то обычно innerHTML работает быстрее, чем удаление и вставка элементов через DOM-вызовы. То есть, сгенерировать таблицу заново эффективнее.

  Element.innerHTML

  Свойство интерфейса Element innerHTML устанавливает или получает HTML или XML разметку дочерних элементов.

  Примечание: Если узлы , , или (en-US) имеют дочерние текстовые узлы, содержащие символы (&), (<), или (>) , innerHTML вернёт эти символы как &amp, &lt и &gt соответственно. Используйте Node.textContent для получения правильной копии содержимого этих текстовых узлов.

  Чтобы вставить HTML в документ, не меняя содержимое элемента, используйте insertAdjacentHTML() .

  Синтаксис

  const content = element.innerHTML; element.innerHTML = htmlString; 

  Значение

  Строка DOMString , которая содержит части HTML разметки. Установка значения innerHTML удаляет всё содержимое элемента и заменяет его на узлы, которые были разобраны как HTML, указанными в строке htmlString.

  Исключения

  Возникает при попытке установить значение innerHTML строкой, в которой содержится неправильно сформированный HTML.

  Возникает при попытке вставить HTML в узел, у которого родителем является Document .

  Примечания

  Это свойство предоставляет простой способ полностью заменить содержимое элемента. Например, все содержимое элемента body может быть удалено:

  .body.innerHTML = ""; // Заменяет содержимое тела пустой строкой. 

  // Скопируйте и вставьте в адресную строку в виде одной строки. javascript: "
  " + document.documentElement.innerHTML.replace(//g, "<") + "
  "; 
  Это свойство было первоначально реализовано веб браузерами, затем описано WHATWG и W3C в HTML5. Старые реализации могут отличаться от новых. Для примера, когда введён текст в поле ввода , IE меняет значение атрибута свойства innerHTML, но браузеры Gecko не делают этого.
  Соображения безопасности
  Не редко можно увидеть использование InnerHTML для вставки текста в веб страницу. Это приводит к рискам безопасности.
  const name = "John"; // предполагая, что 'el' является HTML DOM-элементом. el.innerHTML = name; // безвредный в этом случае // . name = ""; el.innerHTML = name; // безвредный в этом случае 
  Хотя это может выглядеть как XSS-атака, результат безопасный. HTML5 указывает на тег вставленный через InnerHTM должен не выполнится.
  const name = ""; el.innerHTML = name; // показывает alert 
  По этой причине, рекомендуется не использовать innerHTML при вставке обычного текста; вместо этого, используйте node.textContent . Это не интерпретирует отправленный контент как HTML, но вместо этого он вставляется как не обработанный текст.
  Пример
  Этот пример использует innerHTML для создания механизма логирования сообщений внутри элемента на странице.
  JavaScript
  function log(msg)  var logElem = document.querySelector(".log"); var time = new Date(); var timeStr = time.toLocaleTimeString(); logElem.innerHTML += timeStr + ": " + msg + "
  "; > log("Регистрация событий мыши внутри этого контейнера. "); 
  Функция log() создаёт сообщение получая текущее время из объекта Date , используя toLocaleTimeString() , и соединяя строку с временной меткой с текстовым сообщением. Затем сообщение добавляется в элемент с классом «log» .
  function logEvent(event)  var msg = "Event " + event.type + " at " + event.clientX + ", " + event.clientY + ""; log(msg); > 
  Затем мы используем этот обработчик событий на элементе, который содержит наше логирование, для каждого события мыши:
  var boxElem = document.querySelector(".box"); boxElem.addEventListener("mousedown", logEvent); boxElem.addEventListener("mouseup", logEvent); boxElem.addEventListener("click", logEvent); boxElem.addEventListener("mouseenter", logEvent); boxElem.addEventListener("mouseleave", logEvent); 
  HTML
  HTML довольно простой для нашего примера.
  div class="box"> div>strong>Log:strong>div> div class="log">div> div> 
  CSS
  Для нашего примера используем следующие CSS стили.
  .box  width: 600px; height: 300px; border: 1px solid black; padding: 2px 4px; overflow-y: scroll; overflow-x: auto; > .log  margin-top: 8px; font-family: monospace; > 
  Результат
  В результате мы получаем такое содержимое. Вы можете видеть логи наводя мышь на элемент, кликая на него и так далее.
  Спецификации
  
  
  Specification
  
  
  
  
  DOM Parsing and Serialization 
  # dom-innerhtml-innerhtml
  
  
  
  Смотрите также
  
  innerDOM — Для тех, кто хочет придерживаться стандартов, вот один набор функций JavaScript, предлагающий сериализовать или разобрать XML так, чтобы установить содержимое элемента, определённое как строка(и) через DOM или получить содержимое элемента, полученное из DOM как строку.
  Element.insertAdjacentHTML — Альтернатива для innerHTML, позволяющая добавлять новый HTML.
  jssaxparser — Более надёжным (хотя и более тяжёлым) решением, чем innerDOM (поддерживает парсинг с пространствами имён, однокавычками атрибутов, секциями CDATA и т.д.), является этот SAX2 парсер при использовании с его обработчиком DOM-контента. (Предлагает строку на DOM; DOM на строку значительно проще).
  Эффективность соображений: quirksmode.
  
  Found a content problem with this page?
  
  Edit the page on GitHub.
  Report the content issue.
  View the source on GitHub.
  
  This page was last modified on 3 авг. 2023 г. by MDN contributors.
  Your blueprint for a better internet.
  Вставка текста и html-кода в элементы страницы — Методы innerHTML, textContent и insertAdjacentHTML
  
  Если Вы научились манипулировать положением элементов на странице (см. заметки «Действия с элементами — . «), то дальше нужно знать, как добавить текст или HTML-код непосредственно в элементы?
  Работая с примером 2.1 из прошлой статьи, мы имели дело с простым элементом , у которого есть оболочка — это тег div и какое-то оформление — это класс black . Больше ничего этот элемент не содержит.
  Здесь мы продолжим работать с тегом div — будем его редактировать. Допустим нам нужно вписать в него какой-то текст. Как это сделать?
  Для этого существует два метода: innerHTML и textContent. А также метод insertAdjacentHTML, который позволяет вставить текст или код в любое место страницы .
  Метод innerHTML — Вставка текста
  Метод innerHTML позволяет вставить текст.
          
      
  'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем в конец body тег div document.body.append(div); // Вставка текста в тег div div.innerHTML = "Hello world"; 
  Результат в Браузере
  В тег div добавили текст Hello world .
  Метод innerHTML — Вставка HTML-кода
  Метод innerHTML позволяет вставить HTML-код.
  Продолжим работать с предыдущим примером.
  'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка кода div.innerHTML = "
  Hello world
  "; 
  Результат в Браузере
  Текст Hello world заключили в заголовок h1 («Hello world» теперь не умещается в область тега div) .
  Метод textContent — Вставка текста
  Метод textContent позволяет вставить текст.
  'use strict'; const div = document.createElement("div"); div.classList.add('black'); document.body.append(div); // Вставка текста в тег div div.textContent = "textContent"; 
  Результат в Браузере
  В отличии от метода innerHTML — метод textContent работает только с текстом .
  Если при помощи метода textContent пробовать вставить код, то он будет преобразован в строку.
  Метод insertAdjacentHTML
  Напоследок ответим на вопрос, как вставить HTML-код перед или после определенных тегов? Для этого существует метод insertAdjacentHTML.
  Метод insertAdjacentHTML позволяет вставить HTML-код в любое место страницы.
  Синтаксис метода insertAdjacentHTML
  Сначала указывается элемент, относительно которого проводятся действия, и который называется опорным элементом.
  опорный элемент.insertAdjacentHTML( «ключевое слово» , «код» );
  Метод insertAdjacentHTML принимает два аргумента : первый — это одно из ключевых слов: afterbegin, afterend, beforebegin или beforeend. Второй аргумент метода insertAdjacentHTML — это HTML-код, который мы хотим вставить.
  'use strict'; // Создаем новый элемент с указанным именем тега const div = document.createElement("div"); // Добавляем к div класс black div.classList.add('black'); // Добавляем к div стили div.style.cssText = 'width: 250px; height: 110px'; // Добавляем в конец body тег div document.body.append(div); // Вставка HTML-кода в начало и в конец элемента div.insertAdjacentHTML("afterbegin", '
  afterbegin - В начало элемента
  '); div.insertAdjacentHTML("beforeend", '
  beforeend - В конец элемента
  '); // Вставка HTML-кода после и перед элементом div.insertAdjacentHTML("afterend", '
  afterend - После элемента
  '); div.insertAdjacentHTML("beforebegin", '
  beforebegin - Перед элементом
  '); 
  Результат в Браузере
  Результат в консоли
  beforebegin - Перед элементом
   
  afterbegin - В начало элемента
   
  beforeend - В конец элемента
   
   
  afterend - После элемента
   
  Вот так при помощи метода insertAdjacentHTML происходит вставка HTML-кода в любое место страницы относительно опорного элемента.
  
  
  Похожие публикации:
  
  Где находится папка java в windows 10
  Как пользоваться node js
  Как устранить запотевание фар на volvo s40
  Что дает уровень в google play игры