«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Далее на странице...

  • Метод 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, так как первый позволяет работать с элементами на странице без участия родительского элемента.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 3
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки