JavaScript | Как перезаписать детей HTML-элемента?

Зачем переписывать детей HTML-элемента в DOM?

Речь идёт о перемене мест детей между друг другом или полная их замена.

У нас есть какой-то HTML-элемент на странице в браузере. У этого элемента есть несколько детей одного типа. Для простоты восприятия, представьте себе таблицу у которой есть столбцы и записи.

Так вот, если нам нужно будет каким-то образом сортировать все записи таблицы по какому-то столбцу, тогда нам нужно будет по факту менять местами HTML-элементы TR внутри их родительского HTML-элемента TBODY. Нам нужно менять очерёдность этих элементов записей, чтобы визуально таблица перерисовывалась.

Как это сделать?

Видеоролик на тему

Переписываем детей HTML-элемента на странице в браузере силами JavaScript и метода replaceChildren() из интерфейса родительского узла

В стандарте DOM существует специальный интерфейс «Mixin ParentNode«. Он содержит 5 методов для манипулирования детьми:

prepend(nodes)
append(nodes)
replaceChildren(nodes)
querySelector(selectors)
querySelectorAll(selectors)

Все они решают распространённые задачи: «добавить в начало», «добавить в конец», «заменить детей», «найти один по селектору» и «найти всех по селектору».

Все эти методы объединяет одно — они подразумевают вызов на родительском узле.

Реальный пример работы метода переписывания детей элемента в JavaScript

Сделаем 1 DIV и 4 P. Будем перемешивать строчные (текстовые) элементы внутри блочного.

HTML-разметка в которой будут заменяться дети элемента — HTML-разметка, в которой будут заменяться дети элемента

Код с HTML-разметкой:

<!DOCTYPE html>

<head>

<title>Перезапись детей элемента</title>

</head>

<body>

<h1>Перезапись детей элемента</h1>

<p>Текст 1111111</p>

<p>Текст 2222222</p>

<p>Текст 3333333</p>

<p>Текст 4444444</p>

</div>

</body>

</html>

JavaScript-код я буду писать отдельно, но вы можете писать его в этом же файле в элементе SCRIPT.

Сначала мы получаем массив из HTML-элементов P.

let arr = [...document.querySelector("#d").children];

Теперь меняем элементы массива местами и складываем в новый массив. Я буду обращаться к каждому элементу индивидуально и вручную произведу перестановки в массиве. В реальном коде у вас будут работать какие-то свои сложные функции перестановок элементов массивов.

let arr2 = [arr[3], arr[1], arr[0], arr[2]];

И теперь мы можем «распаковать» новую последовательность старых детей в существующий элемент DIV.

document.querySelector("#d").replaceChildren(...arr2);

Обязательно используем оператор троеточия «…«, чтобы элементы массива превратились в параметры функции для replaceChildren(). После этого на странице браузера произойдёт перестановка HTML-элементов P внутри DIV.

Перезаписали детей HTML-элемента div методом replaceChildren - JavaScript — Перезаписали детей HTML-элемента div методом replaceChildren — JavaScript

Задача решена!

Информационные ссылки

Стандарт ECMAScript — https://tc39.es/ecma262/multipage/