3.1 Создание элементов
Работа с DOM (Document Object Model) включает не только навигацию по существующим элементам, но и создание новых элементов, их вставку в документ и удаление. Сейчас мы рассмотрим различные методы и подходы для создания и удаления элементов в DOM.
Метод document.createElement()
Основной метод для создания нового элемента в DOM — это document.createElement(). Этот метод принимает имя тега элемента, который нужно создать, и возвращает новый пустой элемент.
Пример:
const newDiv = document.createElement('div');
Добавление содержимого в элемент
После создания нового элемента его можно наполнить содержимым. Это может быть текст, другие элементы или комбинация того и другого.
Пример:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
Также можно использовать свойство innerHTML, чтобы добавить HTML-содержимое.
Пример:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 Вставка элементов в DOM
Созданный элемент нужно добавить в документ. Существует несколько методов для вставки элементов в DOM:
1. Метод appendChild()
Метод appendChild() добавляет элемент в конец списка дочерних элементов указанного родительского элемента.
Пример:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. Метод insertBefore()
Метод insertBefore() добавляет элемент перед указанным дочерним элементом родительского элемента.
Пример:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. Метод append()
Метод append() добавляет один или несколько узлов или строк в конец списка дочерних элементов указанного родительского элемента.
Пример:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. Метод prepend()
Метод prepend() добавляет один или несколько узлов или строк в начало списка дочерних элементов указанного родительского элемента.
Пример:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 Клонирование элементов
Метод cloneNode() позволяет клонировать элемент. Клонирование может быть глубоким (с копированием всех дочерних элементов) или неглубоким (только самого элемента).
Пример глубокого клонирования:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
Пример неглубокого клонирования:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
Сам элемент <div> был клонирован, это можно увидеть благодаря стилям, однако его дочерние элементы (текстовый узел "This is a div element" и <ul>) не были клонированы.
3.4 Удаление элементов
1. Метод removeChild()
Метод removeChild() удаляет дочерний элемент из родительского элемента.
Пример:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. Метод remove()
Метод remove() удаляет элемент из DOM напрямую.
Пример:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. Очистка содержимого элемента
Метод innerHTML можно использовать для удаления всего содержимого элемента, присвоив ему пустую строку.
Пример:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. Удаление всех дочерних элементов
Для удаления всех дочерних элементов можно использовать цикл или метод innerHTML.
Пример с циклом:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
Пример с innerHTML:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ