Javascript функция createelementns что это описание

Метод createElement

Метод createElement позволяет создать новый элемент, передав в параметре имя тега. После создания с элементом можно работать как с обычным элементом, а также его можно добавить на страницу методами prepend , append , appendChild , insertBefore или insertAdjacentElement .

Если записать результат работы createElement в переменную, то в этой переменной будет такой элемент, как будто бы мы получили его через querySelector или getElementById . Единственное отличие — наш элемент не будет размещен на странице. А так мы можем менять ему innerHTML, атрибуты, навешивать обработчики событий и в конце концов разместить его на странице.

Синтаксис

document.createElement(‘имя тега’);

Пример

Давайте создадим абзац, установим ему текст и поместим на страницу в конец блока #parent :

let parent = document.querySelector(‘#parent’); let p = document.createElement(‘p’); p.textContent = ‘!’; parent.appendChild(p);

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

Пример

Дан ul . Давайте разместим в нем 9 тегов li , при этом их текстом сделаем порядковые номера:

let parent = document.querySelector(‘#parent’); for (let i = 1; i

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

Пример

Давайте при вставке элементов будем привязывать к ним обработчики событий:

let parent = document.querySelector(‘#parent’); for (let i = 1; i ); parent.appendChild(li); >;

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

• метод cloneNode ,
  с помощью которого можно клонировать элемент
• метод createTextNode ,
  с помощью которого можно создать новый текстовый узел

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 в созданном документе. Смотрите баг 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 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Изменение документа

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

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

Пример: показать сообщение

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

 .alert 
Всем привет! Вы прочитали важное сообщение.
 

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

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

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

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

let div = document.createElement('div');

document.createTextNode(text)

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

let textNode = document.createTextNode('А вот и я');

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

Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём:

let div = document.createElement('div'); div.className = "alert"; div.innerHTML = "Всем привет! Вы прочитали важное сообщение.";

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

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

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

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

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

 .alert  

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

• 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 заданными узлами или строками.

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

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

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

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

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

Привет
', document.createElement('hr')); 

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

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

<p>Привет</p> 

Другими словами, строки вставляются безопасным способом, как делает это 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».
Привет
'); div.insertAdjacentHTML('afterend', '
Пока
'); 
Привет
 
Так мы можем добавлять произвольный HTML на страницу.
Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.






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

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

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.
Так что, вот альтернативный вариант показа сообщения:
 .alert  
Удаление узлов
Для удаления узла есть методы node.remove() .
Например, сделаем так, чтобы наше сообщение удалялось через секунду:
 .alert  
Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.
Все методы вставки автоматически удаляют узлы со старых мест.
Например, давайте поменяем местами элементы:
Клонирование узлов: cloneNode
Как вставить ещё одно подобное сообщение?






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

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

Пример копирования сообщения:
 .alert 
Всем привет! Вы прочитали важное сообщение.
  
DocumentFragment
DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.
Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.
 return fragment; > ul.append(getListContent()); // (*) 
Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:
DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:
 return result; > ul.append(. getListContent()); // append + оператор ". " = друзья! 
Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.
Устаревшие методы вставки/удаления
Старая школа

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






Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.
Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.
Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:
Добавляет node в конец дочерних элементов parentElem .
parentElem.insertBefore(node, nextSibling)
Вставляет node перед nextSibling в parentElem .
Чтобы вставить newLi в начало, мы можем сделать вот так:
list.insertBefore(newLi, list.firstChild);
parentElem.replaceChild(node, oldChild)






Заменяет oldChild на node среди дочерних элементов parentElem .
Удаляет node из parentElem (предполагается, что он родитель node ).
Все эти методы возвращают вставленный/удалённый узел. Другими словами, 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 .

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

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

document.write(html)

После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.
Создание, вставка и удаление элементов в JavaScript
На этом уроке мы научимся создавать узлы-элементы ( createElement ) и текстовые узлы ( createTextNode ). А также рассмотрим методы, предназначенные для добавления узлов к дереву ( appendChild , insertBefore ) и для удаления узлов из дерева ( removeChild ).
Создания элементов и текстовых узлов
Создание элемента в JavaScript выполняется с помощью метода createElement :
// $elem – переменная, в которую сохраним созданный элемент const $elem = document.createElement('tag');
Вместо tag необходимо указать тег того элемента, который нужно создать.
Например, создадим элемент p:
const $elem = document.createElement('p');
Создание текстового узла в JavaScript осуществляется посредством метода createTextNode :
const text = document.createTextNode('text');
В аргументе createTextNode необходимо поместить текст, который должен иметь этот текстовый узел.






Например, создадим текстовый узел с текстом «Я новый текстовый узел»:
const text = document.createTextNode('Я новый текстовый узел');
Вставка элементов и текстовых узлов
Чтобы созданный элемент (или текстовый узел) появился в нужном месте страницы его необходимо туда вставить.
Выполнить в JavaScript это можно посредством различных методов.
Одни из самых старых – appendChild и insertBefore .
appendChild
appendChild предназначен для вставки узла в конец элемента (т.е. после последнего его дочернего узла) для которого этот метод вызывается:
// $elem – элемент, во внутрь которого после последнего его дочернего узла необходимо вставить узел $node $elem.appendChild($node);
В качестве результата этот метод возвращает добавленный на страницу узел.
insertBefore
insertBefore предназначен для вставки узла node перед nextSibling в $elem :
$elem.insertBefore(node, nextSibling);
Если в качестве nextSibling передать null , то данный метод вставит node после последнего дочернего узла $elem . Т.е. выполнит действия аналогично appendChild .






В качестве результата метод insertBefore возвращает вставленный узел.
Современные методы вставки и замены
В JavaScript имеются следующие современные методы для вставки элементов и строк:

node.append – для добавления узлов или строк в конец node ;
node.prepend – для вставки узлов или строк в начало node ;
node.before – для вставки узлов или строк до node ;
node.after – для вставки узлов или строк после node .

Пример использования методов:
 
message.
 
  
before 
prepend
 
message.
 
append
 
 after
InsertAdjacent
В JavaScript имеется набор методов insertAdjacent, которые позволяют вставить один или несколько узлов в указанную позицию position относительно $elem
Всего существует 3 таких метода:







$elem.insertAdjacentElement(position, element) – для вставки элемента ( element );
$elem.insertAdjacentHTML(position, htmlString) – для вставки строки ( htmlString ) как HTML;
$elem.insertAdjacentText(position, string) – для вставки строки ( string );

Значение position , может быть, одним из следующих:

'beforebegin' – непосредственно перед $elem ;
'afterbegin' – перед первым дочерним узлом $elem ;
'beforeend' – после последнего дочернего узла $elem ;
'afterend' – сразу после $elem ;

Пример использования insertAdjacentHTML :
DocumentFragment
DocumentFragment – это облегчённая версия Document . Он используется в качестве обёртки для временного хранения HTML элементов.
После формирования фрагмента его можно использовать в различных методах (например, append , prepend и др.). При этом, когда мы его вставляем, то вставляется только его содержимое.
DocumentFragment в основном используется, когда необходимо вставить множество элементов на страницу, а также для элемента .
  
Использование DocumentFragment в подобных сценариях может значительно ускорить ваш сайт. Т.к. изменение DOM — это очень затратная операция. А с помощью DocumentFragment это можно сделать всего за одну операцию.
DocumentFragment не является частью видимой DOM. Изменения, внесенные во фрагмент, не влияют на документ и производительность страницы.
При использовании современных методов для вставки элементов можно не использовать DocumentFragment , т.к. в отличие от appendChild и insertBefore они позволяют вставлять сразу массив элементов.






Например, перепишем первый пример с использованием append :
Замена и клонирование узлов
Замену одних узлов другими в JavaScript можно выполнить с помощью методов replaceChild (когда нужна поддержка «старых» браузеров) и replaceWith .
replaceChild
replaceChild предназначен для замены одного дочернего узла parentNode другим:
parentNode.replaceChild(newChild, oldChild);

newChild – элемент, которым необходимо заменить oldChild ;
parentNode – родительский узел по отношению oldChild .

В качестве результата данный метод возвращает узел, который был заменён новым узлом, т.е. oldChild .

второй

   на новый с текстом «Five».


replaceWith
node.replaceWith позволяет node заменить заданными узлами или строками:
node.replaceWith(. nodes, strings)

второй

   другими элементами:


cloneNode – клонирование узла
cloneNode предназначен для создания копии узла:
let copy = node.cloneNode(deep);

node – узел, который нужно клонировать;
copy – переменная, в которую нужно поместить новый узел, который будет копией node ;
deep – глубина клонирования (по умолчанию false , т.е. выполняется клонирование только самого элемента node без детей); если установить true , то node будет скопирован со всеми его детьми.


и вставим её в конец .


Удаление узлов
Удалить узел из DOM можно в JavaScript с помощью методов removeChild (считается устаревшим) и remove .
removeChild
parent.removeChild(node)
Для удаления узла необходимо вызвать метод removeChild у родительского элемента и передать ему в качестве аргумента его сам ( node ).
В качестве результата метод removeChild возвращает удалённый узел.
Например, удалим элемент, а затем вставим его в другое место:
 
.
 
  
remove
Ещё один способ удалить узел – это использовать метод remove .
node.remove()
Например, удалим элемент при нажатии на него:
Кнопка  
Когда мы вставляем элементы, они удаляются со старых мест.
Задачи
1. Имеется два списка в документе. Необходимо переместить элементы из второго списка в первый.
2. Создать список, текстовое поле и 2 кнопки. Написать код на языке JavaScript, который в зависимости от нажатой кнопки добавляет текст, находящийся в текстовом поле, в начало или в конец списка.
3. Напишите функцию, удаляющую все текстовые узлы у элемента.
5. Удалить содержимое элемента, т.е. все его дочерние узлы
6. Заменить текстовый узел "Модель" текстовым узлом "Чертёж", который необходимо создать с помощью метода createTextNode().
7. Поменяйте местами первый и последний дочерние узлы у списка ul с .
Если статья понравилась, то поделитесь ей в социальных сетях:
Комментарии: 5
17.05.2021, 13:28
Добрый день! Подскажи, пожалуйста, по первой задаче из «Добавление узлов дерева». Как ее решить было бы «правильно», как бы решал ты сам? 
Я решил таким образом: 
Александр Мальцев

19.05.2021, 14:29
Привет! Её можно решить различными способами. Просто когда мы вставляем по одному элементу — это не лучший вариант, т.к. изменение DOM довольно дорогая операция. Лучше все сразу. 
Набросал 4 различных способа (1 лучше не использовать, сделал для примера): 
Ссылка на пример: modifying-document-task-01

14.05.2021, 18:32
MDN пишет про второй параметр «Node.insertBefore()»:
В Mozilla Firefox, если referenceElement не задан или равен null, newElement вставляется в конец списка дочерних элементов. В IE, referenceElement равный undefined, сгенерируется исключение "Invalid argument", в то время как Chrome сгенерирует исключение "Uncaught TypeError", ожидая 2 аргумента."
Возможно, нужно немного исправить выше. Столкнулся с ошибкой в Хроме, не указав второй параметр.

Александр Мальцев

19.05.2021, 14:13

Спасибо, поправил этот момент.

19.10.2018, 12:01
Я пытаюсь реализовать механизм, где к примеру по клику на кнопку появляется список в имеющимся родительском элементе div по событию onchange передаю выбранные параметры в функцию js, далее отправляю данные на сервер, получаю следующий список данных, возвращаю в success, после использую шаблоны template(js) 
чтобы прокрутить в цикле получить данные и подставить значение в тег списка в этом же теге снова передаю данные с помощью onchange той же функции js, где она должна так же отправить данные на сервер, получить ответ и создать следующий DOM элемент div с другим id вставив тег select>option и вывести следом за предыдущим в родительском элементе… 
То есть при каждом возврате данных с сервера мне надо чтобы создавался DOM элемент, в него добавлялся тег или к примеру(в зависимости от типа поля).

При первом вызове этой функции все отрабатывает правильно, создает элемент, отображается в DOM структуре, при повторном попадании создает также элемент div присваивает ему id, но когда использую appendChild() ругается: Cannot read property 'appendChild' of null. Я как понимаю скрипт отрабатывается раньше загрузки разметки… Какими путями можно решить данную задачу?
Популярное

1. Слайдер для сайта на чистом CSS и JavaScript 373K
2. Модальное окно Bootstrap для сайта 369.5K
3. Bootstrap 3 - Navbar (горизонтальное меню) 368.3K
4. Маска ввода для HTML элемента input 356.5K
5. CSS медиа-запросы (media queries) 345.3K
6. Форма обратной связи для сайта с отправкой на почту 329.2K
7. Bootstrap - Carousel (карусель) 298.4K



Похожие публикации:

Как посмотреть демки left 4 dead 2
Как улучшить шифровальное снаряжение
Что такое dlr
Что такое finally