Теперь, когда вы узнали, как выбирать и стилизовать 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>

Позиции beforebegin и afterend работают, только если узел находится в дереве DOM и имеет родительский элемент. Кроме того, при вставке HTML на страницу, будьте осторожны, не рекомендуется использовать теги <input>, <textarea> и т.д., которые не были экранированы во избежание XSS-атак.

Удаление существующих элементов из 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>

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.