ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Category:

JavaScript: добавление (append) HTML-элементов на страницу

Когда я в первый раз просматривал решение задачи «Создайте список» от ее авторов к подразделу 1.7 «Изменение документа» второй части учебника по JavaScript, оно поставило меня в тупик.

Там создание списка из HTML-элементов ul и li на HTML-странице происходит в таком порядке:
let ul = document.createElement('ul'); // создание списка ul

document.body.append(ul);              // добавление списка ul на HTML-страницу

let li = document.createElement('li'); // создание пункта li
li.textContent = "текст пункта";

ul.append(li);                         // добавление пункта li в список ul

Я думал, что такое работать не будет, потому что, как мне представлялось, сначала нужно собрать список, а только потом добавлять его на HTML-страницу, как-то так:
let ul = document.createElement('ul'); // создание списка ul

let li = document.createElement('li'); // создание пункта li
li.textContent = "текст пункта";

ul.append(li);                         // добавление пункта li в список ul

document.body.append(ul);              // добавление списка ul на HTML-страницу

Но, фактически, оба эти варианта работают и дают одинаковый результат.

Почему так получается? Как оказалось, я неверно представлял то, как работает метод append. Я думал, он копирует объект на страницу, после чего HTML-элемент в программе и HTML-элемент на HTML-странице становятся разными объектами (на самом деле, остаются одним и тем же объектом).

Однако, как и обычно в большинстве случаев в JavaScript, копирования (клонирования) объекта в этом случае не происходит. В результате работы метода append одно из свойств родительского объекта document.body начинает указывать на объект ul как на потомка и, наоборот, одно из свойств объекта ul начинает указывать на объект document.body как на его родителя. Таким образом, объект ul оказывается встроен в HTML-страницу. При этом переменная ul продолжает содержать указатель на объект ul, поэтому можно добавлять в объект ul объекты li и после добавления объекта ul на HTML-страницу.
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments