Js как добавить элемент в html

Мультивставка: 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.
  document.createElement
  В HTML-документах создаёт элемент c тем тегом, что указан в аргументе или HTMLUnknownElement , если имя тега не распознаётся.
  В XUL-документах создаёт указанный в аргументе элемент XUL.
  В остальных случаях создаёт элемент с нулевым NamespaceURI.
  
  
  
  
  
  
  Параметры
  var element = document.createElement(tagName, [options]);
  
  element — созданный объект элемента.
  tagName — строка, указывающая элемент какого типа должен быть создан. nodeName создаётся и инициализируется со значением tagName .
  options — необязательный параметр, объект ElementCreationOptions , который может содержать только поле is , указывающее имя пользовательского элемента, созданного с помощью customElements.define() (см. Веб-компоненты).
  
  Пример
  Данный пример создаёт новый элемент и вставляет его перед элементом с идентификатором org_div1 :
  div>h1>Привет!h1>div> div id="org_div1">Текст выше сгенерирован автоматически.div> 
  .body.onload = addElement; var my_div = (newDiv = null); function addElement()  // Создаём новый элемент div // и добавляем в него немного контента var newDiv = document.createElement("div"); newDiv.innerHTML = "
  Привет!
  "; // Добавляем только что созданный элемент в дерево DOM my_div = document.getElementById("org_div1"); document.body.insertBefore(newDiv, my_div); > 
  Примечания
  Если существуют атрибуты со значениями по умолчанию, атрибуты узлов предоставляющие их создаются автоматически и применяются к элементу.
  Для создания элементов с заданным пространством имён используйте метод createElementNS.
  Реализация createElement в Gecko не соответствует DOM спецификации для XUL и XHTML документов: localName и namespaceURI не устанавливаются в null в созданном документе. Смотрите Firefox bug 280692 для подробностей.
  Для обратной совместимости с предыдущими версиями спецификации пользовательских элементов некоторые браузеры позволяют передавать здесь строку вместо объекта, где значением строки является имя тега пользовательского элемента.
  Спецификации
  
  
  Specification
  
  
  
  
  DOM Standard 
  # ref-for-dom-document-createelement①
  
  
  
  Совместимость с браузерами
  BCD tables only load in the browser
  
  
  
  
  
  
  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 27 нояб. 2023 г. by MDN contributors.
  Your blueprint for a better internet.
  Создание и добавление элементов DOM
  На этом занятии мы поговорим о том как можно добавлять и удалять элементы в DOM-дереве, то есть, фактически в HTML-документе. И начнем с такого примера. Предположим, мы хотим создать вот такое сообщение:
  DOCTYPE html> html> head> title>Уроки по JavaScripttitle> head> style> .msg { width: 400px; margin: 0 auto; text-align: center; background: #20454B; padding: 5px; border-radius: 5px; color: #eee; font-size: 24px; } style> body> div class="msg">Важная информация!div> script> script> body> html>
  Но будем это делать посредством JavaScript. Поэтому тег div уберем. Теперь, чтобы создать элемент div, воспользуемся методом
  и пропишем его так:
  let div = document.createElement('div');
  Далее, укажем класс стилей и содержимое:
  
  
  
  
  
  
  div.className = "msg"; div.innerHTML = "Важная информация!";
  Все, теперь переменная div является объектом для представления тега div с классом msg и строкой «Важная информация!». Но этот объект пока еще не является частью DOM-дерева, а значит, не содержится в HTML-документе. Если мы сейчас обновим страницу, то ничего на ней не увидим.
  Для размещения объекта на HTML-странице существует несколько методов. Сейчас мы воспользуемся методом append, который может быть вызван из любого узла DOM-дерева для добавления объекта как дочернего в конец списка. Например, добавим наш div в раздел body:
  document.body.append(div);
  И если теперь посмотрим структуру HTML-документа, то увидим, что div идет последним в списке дочерних элементов раздела body.
  
  Кроме метода append существуют такие методы вставки: 
  
  node.prepend(. nodes or strings) – вставляет узлы или строки в начало node;
  node.before(. nodes or strings) – вставляет узлы или строки до node;
  node.after(. nodes or strings) – вставляет узлы или строки после node;
  node.replaceWith(. nodes or strings) – заменяет node заданными узлами или строками.
  
  Обратите внимание, что эти методы могут вставлять не только объекты-теги, но и текстовые элементы как строки. Чтобы все было понятнее, рассмотрим работу этих методов на таком примере. Пусть у нас имеется документ:
  
  
  
  
  
  
  h1>Солнечная системаh1> ul> li>Солнце li>Меркурий li>Венера li>Земля ul>
  И выполним следующие операции:
  let list = document.querySelector("ul"); list.before('before'); list.after('after');
  В результате до и после списка вставятся текстовые элементы со значениями before и after. Далее:
  let li_1 = document.createElement('li'); li_1.innerHTML = "первый элемент"; list.prepend(li_1); let li_2 = document.createElement('li'); li_2.innerHTML = "последний элемент"; list.append(li_2);
  будет добавлен первый и последний элемент в список. И, наконец, вот такая операция:
  list.replaceWith(document.createElement("hr"), "замена", document.createElement("br"));
  заменяет весь список новой информацией: тегом hr, строкой «замена» и тегом br. Вот этот последний пример показывает, что данные методы могут принимать сразу более одного аргумента для вставки нескольких элементов. Методы append/prepend/before/after позволяют также перемещать уже существующие элементы. То есть, когда мы вставляем имеющийся элемент, он автоматически удаляется со своего прежнего места и добавляется в новое. Например, у нас есть исходный список и мы хотим «солнце» поместить после «земли». Это можно сделать так:
  let li = document.querySelector("ul.list > li:first-child"); let list = document.querySelector("ul.list"); list.append(li);
  В JavaScript помимо создания элементов-тегов с помощью метода createElement можно создавать и текстовые элементы. Для этого следует использовать метод document.createTextNode(text) например, так:
  let textNode = document.createTextNode('Текстовый элемент'); document.body.append(textNode);
  В результате мы получим простой текст внутри HTML-документа.
  insertAdjacentHTML
  Рассмотренные выше методы вставки добавляют либо отдельные теги, либо текстовую информацию. Причем, текст вставляется именно как текст, то есть, теги внутри текста будут отображены как текст. Например:
  document.body.append("Текст с тегом");
  
  «beforebegin» – для вставки html непосредственно перед elem;
  «afterbegin» – для вставки html как первого дочернего элемента в elem;
  «beforeend» – для вставки html как последнего дочернего элемента в elem;
  «afterend» – для вставки html непосредственно после elem.
  
  ul> li>Меркурий li>Венера li>Земля ul>
  И сделаем такие вставки:
  
  Смотрите как разместились эти элементы. Существует еще два похожих метода, но более специализированных: 
  
  insertAdjacentText(where, text) – для вставки строки текста text;
  insertAdjacentElement(where, elem) – для вставки элемента elem.
  
   Например:
  list.insertAdjacentText("beforebegin", "Список планет
  ");
  вставит текст как строку, а
  let li = document.createElement("li"); li.innerHTML="Солнце"; list.insertAdjacentElement("afterbegin", li);
  добавит соответствующий элемент. Однако, на практике эти два метода почти не применяются. Вместо них удобнее использовать методы append/prepend/before/after просто потому, что легче писать. Если нам нужно удалить какой-либо узел из DOM-дерева, то для этого часто используется метод node.remove() Например, имеется список:
  ul class="list"> li>Солнце li>Меркурий li>Венера li>Земля li>Марс ul>
  И мы из него хотим из него удалять последние пункты, пока полностью не очистим. Это можно сделать так:
  let idRemove = setInterval(function() { let li = document.querySelector("ul.list > li:last-child"); if(li === null) { clearInterval(idRemove); alert("Список удален"); } else li.remove(); }, 500);
  cloneNode
  Следующий метод cloneNode позволяет создавать клон узла DOM-дерева. Он имеет следующий синтаксис: elem.cloneNode(flDeep); Если flDeep равен true, то создается «глубокий» клон объекта со всеми его свойствами и дочерними элементами. При значении false получаем клон без дочерних элементов. Когда может пригодиться такая операция. Например, у нас есть вот такая таблица:
  table border=1 cellpadding="10"> tr>td>Солнцеtd>td>Звездаtd>tr> tr>td>Меркурийtd>td>Планетаtd>tr> table>
  Мы хотим добавить в нее еще одну строку с планетой Венерой. Это можно сделать путем клонирования существующей строки и добавления клона в конец таблицы:
  let t = document.querySelector("table"); let r = document.querySelector("table>tbody>tr:last-child"); let row = r.cloneNode(true); row.firstChild.innerHTML = "Венера"; t.append(row);
  Все, теперь у нас появилась еще одна строчка с Венерой.
  DocumentFragment
  В JavaScript есть DOM-объект специального вида – DocumentFragment. Он как бы образует фрагмент документа со своим DOM-деревом, то есть, со своим содержимым. Затем, это содержимое можно целиком вставить в любое место HTML-документа. Приведем такой простой пример. Предположим, имеется пустой список:
  ul>ul>
  И мы хотим в него вставить заготовленный фрагмент списка. Это может выглядеть так:
  let fr = new DocumentFragment(); let list=["Меркурий", "Венера", "Земля", "Марс"]; for(let p of list) { let item = document.createElement('li'); item.innerHTML = p; fr.append(item); } let ul = document.querySelector("ul"); ul.append(fr);
  Но это лишь пример использования DocumentFragment. В данном конкретном случае все можно реализовать проще:
  let list=["Меркурий", "Венера", "Земля", "Марс"]; let ul = document.querySelector("ul"); for(let p of list) { let item = document.createElement('li'); item.innerHTML = p; ul.append(item); }
  
  parent.appendChild(node) – добавляет элемент в конец списка дочерних элементов;
  parent.insertBefore(node, nextSibling) – вставляет элемент перед nextSibling;
  parent.removeChild(node) – удаляет элемент node (здесь parent является родителем node);
  parent.replaceChild(newElem, node) – заменяет дочерний элемент node на новый newElem.
  
  document.write
  Это довольно древний метод, который появился в JavaScript когда даже не было понятия DOM-объектов и DOM-дерева. Данный метод позволяет добавлять HTML-содержимое в то место, где записан и имеет такой синтаксис: document.write(html); Причем, срабатывает этот метод только в момент загрузки страницы. Если вызвать его после загрузки, то все содержимое HTML-документа будет удалено! В качестве примера приведу такую страницу:
  h1>Солнечная системаh1> script> document.write('
  Строка вставленная методом write'); script> ul> li>Солнце li>Меркурий li>Венера li>Земля ul>
  
  Если же мы выполним этот метод после полной загрузки, то получим следующее:
  setTimeout(function() { document.write('Строка вставленная методом write'); }, 500);
  Видите? Все содержимое HTML-документа пропало и осталась только эта одна строка. Но, несмотря на все эти особенности, метод document.write иногда применяют для динамического формирования HTML-страницы. Дело в том, что он срабатывает еще до построения DOM-дерева и все что он добавит в документ воспринимается браузером так, словно такая страница изначально была получена с сервера. И, в частности, так можно динамически добавлять теги 
  
  
  Методы создания узлов
  
  
  document.createElement(tag)
  создает указанный объект-тег
  
  
  document.createTextNode(value)
  создает текстовый узел
  
  
  elem.cloneNode(deep)
  создает клон элемента
  
  
  Методы вставки и удаления узлов
  
  
  elem.append(node [или text])
  добавляет node (или текст) как последний дочерний элемент
  
  
  elem.prepend(node [или text])
  добавляет node (или текст) как первый дочерний элемент
  
  
  elem.before(node [или text])
  добавляет node (или текст) непосредственно перед объектом elem
  
  
  elem.after(node [или text])
  добавляет node (или текст) непосредственно после объекта elem
  
  
  elem.replaceWith(node [или text])
  заменяет объект elem другим объектом или текстовым элементом
  
  
  node.remove()
  удаляет элемент
  
  
  Также желательно знать и устаревшие методы, так как они могут встретиться в сторонних скриптах:
  
  
  Методы вставки и удаления узлов
  
  
  parent.appendChild(node)
  добавляет node как последний дочерний элемент у parent
  
  
  parent.insertBefore(node, nextSibling)
  вставляет элемент перед nextSibling
  
  
  parent.removeChild(node)
  удаляет элемент node (здесь parent является родителем node)
  
  
  parent.replaceChild(newElem, node)
  заменяет дочерний элемент node на новый newElem
  
  
  elem.insertAdjacentHTML(where, html)
  вставляет фрагмент html в зависимости от значения where
  
  
  Отдельный метод вставки в момент загрузки
  
  
  document.write(html)
  вставка фрагмента html в момент загрузки HTML-страницы
  
  
  
  
  Похожие публикации:
  
  Connection not inited telegram что делать
  Destination folder contains 1 space anaconda что это
  Как повернуть приложение на айпад
  Как проверить тип документа в 1с