Далее на странице...
- Метод appendChild Позволяет вставить элемент в конец другого элемента Метод appendChild аналогичен методу append
- Метод insertBefore Позволяет вставить элемент перед другим элементом На замену пришли методы prepend, before и after
- Метод removeChild Позволяет удалить дочерний элемент removeChild устарел - Метод remove пришел на замену
- Метод replaceChild Позволяет заменить дочерний элемент на выбранный replaceChild устарел - Метод replaceWith пришел на замену
Эта статья дополняет предыдущую, в которой проводились действия с элементами на странице с использованием современных методов.
Здесь мы продолжим работать с элементами на странице и разберем устаревшие конструкции, которые, еще встречаются в коде. И поэтому их необходимо знать.
Метод appendChild
Метод appendChild позволяет вставить элемент в конец какого-либо другого элемента.
Метод appendChild это аналог более современного метода append.
Пример 1.1
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Elements - Udemy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box" id="box"></div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Результат в Браузере
Вернемся к примеру 2.2 из прошлой статьи, в котором использовался метод append.
Но теперь будем работать с методом appendChild. И вставим тег div в конец другого элемента.
JavaScript-код
'use strict';
// Новый div
const div = document.createElement("div");
div.classList.add('black');
// Доступ к элементу
const wrapper = document.querySelector('.wrapper');
wrapper.appendChild(div);
Результат в Браузере
Итак, метод appendChild аналогичен методу append.
Метод insertBefore
Раньше таких методов, как prepend, before и after не существовало.
Но был метод insertBefore (в переводе "вставить перед"), который позволяет вставить элемент перед другим элементом.
Метод insertBefore имеет следующий синтаксис:
родитель.insertBefore(элемент, перед кем вставить)
С помощью метода insertBefore вставим новый тег div перед вторым сердцем, как в примере 4.1 из прошлой статьи, где использовался метод before.
Пример 2.1
JavaScript-код
'use strict';
/* Доступ к родителю и к дочерним элементам */
const wrapper = document.querySelector('.wrapper'),
hearts = document.querySelectorAll('.heart');
// Новый div
const div = document.createElement("div");
div.classList.add('black');
wrapper.insertBefore(div, hearts[1]);
Результат в Браузере
Перед вторым сердцем появился черный квадрат.
Теперь с помощью метода insertBefore вставим новый тег div перед третьим сердцем, то есть после второго сердца как в примере 4.2 из прошлой статьи, где использовался метод after.
Пример 2.2
JavaScript-код
'use strict';
/* Доступ к родителю и к дочерним элементам */
const wrapper = document.querySelector('.wrapper'),
hearts = document.querySelectorAll('.heart');
// Новый div
const div = document.createElement("div");
div.classList.add('black');
wrapper.insertBefore(div, hearts[2]);
Результат в Браузере
Перед третьим сердцем появился черный квадрат.
Итак, метод insertBefore это устаревший метод и ранее он использовался вместо современных методов prepend, before и after.
Метод removeChild
Ранее не существовало метода remove.
Но был метод removeChild - позволяет удалить дочерний элемент.
Метод removeChild имеет следующий синтаксис:
родитель.removeChild(элемент)
При помощи метода removeChild удалим одно из сердец.
JavaScript-код
'use strict';
/* Доступ к родителю и к дочерним элементам */
const wrapper = document.querySelector('.wrapper'),
hearts = document.querySelectorAll('.heart');
wrapper.removeChild(hearts[1]);
Результат в Браузере
С помощью метода removeChild удалили 2-е сердце.
Стоит отметить и это видно из примеров, что при работе со старыми методами insertBefore и removeChild действия с элементами на странице происходят через родителя: приходится обращаться к родительскому элементу и уже через него работать с дочерним. В этом плане современные методы более удобны.
Метод replaceChild
Метод replaceChild - это устаревший аналог более современного метода replaceWith.
Метод replaceChild позволяет заменить дочерний элемент на новый (выбранный).
родитель.replaceChild(новый элемент, заменяемый элемент);
HTML-код
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
JavaScript-код
'use strict';
/* Доступ к кругам, затем к родителю сердец и к самим сердцам */
const circles = document.querySelectorAll('.circle'),
wrapper = document.querySelector('.wrapper'),
hearts = document.querySelectorAll('.heart');
// Меняем 2-е сердце на круг
wrapper.replaceChild(circles[1], hearts[1]);
Результат в Браузере
В результате на месте второго сердца появился круг. Это можно увидеть в консоли во вкладке Elements.
Результат в консоли
<div class="circle"></div>
<div class="circle"></div>
<div class="wrapper">
<div class="heart"></div>
<div class="circle"></div>
<div class="heart"></div>
</div>
И здесь мы снова видим, что современный метод replaceWith более удобен, чем метод replaceChild, так как первый позволяет работать с элементами на странице без участия родительского элемента.
