В этом руководстве вы узнаете, как использовать JavaScript document.createElement() для создания нового элемента HTML и добавления его к дереву DOM.
Чтобы создать элемент HTML, используйте метод document.createElement() :
let element = document.createElement(htmlTag);
document.createElement() принимает имя тега HTML и возвращает новый Node с Element.
1) Пример создания нового div
Предположим, у вас есть следующий HTML-документ:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
</body>
</html>В следующем примере document.createElement() используется для создания нового элемента <div> :
let div = document.createElement('div');И добавьте фрагмент HTML в div :
div.innerHTML = '<p>CreateElement example</p>';
Чтобы прикрепить div к документу, вы используете метод appendChild() :
document.body.appendChild(div);
Соединим все это вместе:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
<script>
let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);
</script>
</body>
</html>Добавление идентификатора
Если вы хотите добавить идентификатор к div, вы устанавливаете id элемента в значение, например:
let div = document.createElement('div');
div.id = 'content';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);Добавление класса
В следующем примере задается класс CSS для нового div note :
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
div.innerHTML = '<p>CreateElement example</p>';
document.body.appendChild(div);Новый текст в div
Чтобы добавить фрагмент текста в <div>, вы можете использовать свойство innerHTML, как в приведенном выше примере, или создать новый узел Text и добавить его к div :
// create a new div and set its attributes
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
// create a new text node and add it to the div
let text = document.createTextNode('CreateElement example');
div.appendChild(text);
// add div to the document
document.body.appendChild(div);Добавление элемента
Чтобы добавить элемент в div, вы создаете элемент и добавляете его в div используя метод appendChild() :
let div = document.createElement('div');
div.id = 'content';
div.className = 'note';
// create a new heading and add it to the div
let h2 = document.createElement('h2');
h2.textContent = 'Add h2 element to the div';
div.appendChild(h2);
// add div to the document
document.body.appendChild(div);
2) Пример создания новых элементов списка( li )
Допустим, у вас есть список элементов:
<ul id="menu">
<li>Home</li>
</ul>
Следующий код добавляет два элемента li к ul :
let li = document.createElement('li');
li.textContent = 'Products';
menu.appendChild(li);
li = document.createElement('li');
li.textContent = 'About Us';
// select the ul menu element
const menu = document.querySelector('#menu');
menu.appendChild(li);
Выход:
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
</ul>3) Создание элемента script
Иногда может потребоваться динамическая загрузка файла JavaScript. Для этого вы можете использовать document.createElement(), чтобы создать элемент script и добавить его в документ.
В следующем примере показано, как создать новый элемент script и загрузить в документ файл /lib.js :
let script = document.createElement('script');
script.src = '/lib.js';
document.body.appendChild(script);Сначала вы можете создать новую вспомогательную функцию, которая загружает файл JavaScript из URL-адреса:
function loadJS(url) {
let script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}Затем используйте вспомогательную функцию для загрузки файла /lib.js :
loadJS('/lib.js');Чтобы загрузить файл JavaScript асинхронно, установите для атрибута script async элемента c2NyaXB0 значение true :
function loadJSAsync(url) {
let script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
}Заключение
document.createElement()создает новый элемент HTML.element.appendChild()добавляет элемент HTML к существующему элементу.