Руководство по манипулированию DOM в JavaScript

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

Добавление новых элементов в DOM

Вы можете явно создать новый элемент в документе HTML, используя метод document.createElement(). Этот метод создает новый элемент, но не добавляет его в DOM; вам придется сделать это в отдельном шаге, как показано в следующем примере:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Создаем новый элемент div
var newDiv = document.createElement("div");
 
// Созданем текстовое содержимое
var newContent = document.createTextNode("Hi, how are you doing?");
 
// Добавляем текст в созданный div
newDiv.appendChild(newContent);
 
// Добавляем созданный элемент и его содержимое в DOM
var currentDiv = document.getElementById("main"); 
document.body.appendChild(newDiv, currentDiv);
</script>

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

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Создаем новый элемент div
var newDiv = document.createElement("div");
 
// Созданем текстовое содержимое
var newContent = document.createTextNode("Hi, how are you doing?");
 
// Добавляем текст в созданный div
newDiv.appendChild(newContent);
 
// Добавляем созданный элемент и его содержимое в DOM
var currentDiv = document.getElementById("main"); 
document.body.insertBefore(newDiv, currentDiv);
</script>

Получение или установка содержимого HTML для DOM

Вы также можете легко получить или установить содержимое элементов HTML с помощью свойства innerHTML. Это свойство устанавливает или получает HTML-разметку, содержащуюся в элементе, т.е. содержимое между его открывающим и закрывающим тегами. В слушающем примере демонстрируется, как это работает:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Получаем содержимое innerHTML
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
 
// Устанавливаем содержимое mainDiv 
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
</script>

Вы можете легко вставлять новые элементы в DOM, используя свойство innerHTML, но есть одна проблема, свойство innerHTML заменяет все существующее содержимое элемента. Поэтому, если вы хотите вставить HTML-код в документ без замены существующего содержимого элемента, вы можете использовать метод insertAdjacentHTML().

Этот метод принимает два параметра: положение для вставки и HTML-текст для вставки. Позиция должна иметь одно из следующих значений: "beforebegin", "afterbegin", "beforeend", и "afterend". Этот метод поддерживается во всех основных браузерах.

В следующем примере показана визуализация этих значений.

<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->
 
<script>
// Выбираем элемент
var mainDiv = document.getElementById("main");
 
// Вставляем HTML непосредственно перед самим элементом
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
 
// Вставляем HTML прямо внутри элемента перед его первым потомком
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');
 
// Вставляем HTML прямо внутри элемента, после его последнего потомка
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
 
// Вставляем HTML сразу после самого элемента
mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
</script>

Удаление существующих элементов из DOM

Точно так же вы можете использовать метод removeChild() для удаления дочернего узла из DOM. Этот метод также возвращает удаленный узел. Вот пример:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>

<script>
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>

Также возможно удалить дочерний элемент, не зная точно родительский элемент. Просто найдите дочерний элемент и используйте свойство parentNode, чтобы найти его родительский элемент. Это свойство возвращает родителя указанного узла в дереве DOM. Вот пример:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>

Замена существующих элементов в DOM

Вы также можете заменить элемент в HTML DOM другим, используя метод replaceChild(). Этот метод принимает два параметра: узел для вставки и узел для замены. Он имеет следующий синтаксис: parentNode.replaceChild(newChild, oldChild);. Вот пример:

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
var parentElem = document.getElementById("main");
var oldPara = document.getElementById("hint");
 
// Creating new elememt
var newPara = document.createElement("p");
var newContent = document.createTextNode("This is a new paragraph.");
newPara.appendChild(newContent);
 
// Замена старого абзаца новым
parentElem.replaceChild(newPara, oldPara);
</script>