Загрузка...

Создание элементов

На кухонной пробковой доске уже висит одна записка: milk. Список — это #board. Записка — элемент li с id milk. Разметка в одну строку, поэтому пустого текстового узла от переноса нет.
Тебе нужны ещё tea, bread и eggs. Не собирай тег из строки. document.createElement("li") даёт новый li, которого ещё нет в документе. parentElement равен null. document.body.contains равен false. board.children.length остаётся 1: на доске только milk.
textContent = "tea" пишет слово на этот объект. К странице он от этого не крепится.
board.append(tea) ставит его в конец списка. Результат вызова — undefined. Узел он не отдаёт. appendChild отдаёт тот же узел; эта страница берёт append. prepend ставит хлеб первым. insertBefore(eggs, milk) ставит яйца прямо перед milk, а milk уже ребёнок доски. Порядок: bread, eggs, milk, tea. children.length становится 4.
Отдельный опыт только на свежей доске: createTextNode("salt"). Это текстовый узел, не li. Если его прикрепить, children.length останется 1. childNodes.length станет 2 вместо 1. nodeType равен 3. Последний элемент по-прежнему milk. Демо страницы соль не добавляет.
Строка под доской: bread / eggs / milk / 4. tea есть в списке и нет в этой строке. Число 4 — это количество элементов. Текст milk остаётся milk. Свойство CSS здесь не задаёшь.

Новые узлы, не новый слой краски

Прошлая страница писала style, setProperty, classList и cssText на образце краски. Узел она не создавала. Страница до неё меняла слова через textContent, innerHTML и insertAdjacentHTML. Здесь ты не задаёшь style, не разбираешь HTML-строку и не переписываешь слово milk. getElementById даёт только доску и записку milk. Новые строки приходят из createElement.

Куда садится каждый новый узел

Доска начинается с одного li: milk. Читай строки по порядку. Строка с солью — опыт на этой свежей доске, до tea, bread и eggs. Демо страницы останавливается на insertBefore и соль не крепит.

📊 Куда садится каждый новый узел

Вызов Где сидит новый узел Дети-элементы Лёгкая путаница
createElement("li") нигде; parentElement равен null всё ещё 1, milk думать, что записка уже на доске
textContent = "tea" всё ещё нигде всё ещё 1 думать, что слово само вставляет li
append(tea) в конце; результат undefined 2: milk, затем tea ждать, что append вернёт узел
prepend(bread) в начале 3: bread, milk, tea перепутать prepend и append
insertBefore(eggs, milk) прямо перед milk 4: bread, eggs, milk, tea ссылка, которая не ребёнок доски
append(createTextNode("salt")) на свежей доске текстовый узел после milk, не li всё ещё 1 что children.length станет 2

createElement строит узел в памяти. Доска не меняется, пока метод его не поставит. children считает только детей-элементы. Текстовый узел есть в childNodes и его нет в children. append и prepend дают undefined. appendChild отдаёт узел, который ты передал. append принимает узел или строку; строка становится текстовым узлом. appendChild принимает узел, а строка бросает ошибку. insertBefore нужна ссылка, которая уже ребёнок этого родителя. Передай null — узел уйдёт в конец, та же идея, что у append. Эта страница передаёт milk, не null. Если прикрепить узел, который уже на доске, он переедет. Копии не будет.

Новый li ещё не на доске

Файл открывается однострочным списком. Ничего не создано. Первые четыре вывода спрашивают новый узел и доску, до текста и до крепления.

Отдельная записка

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
console.log(tea.parentElement);
console.log(document.body.contains(tea));
console.log(board.children.length);
console.log(tea.textContent);

Выводы: null, false, 1 и пустая строка. У браузера есть настоящий объект li. Родителя нет. Единственный ребёнок-элемент всё ещё milk. Слово milk принадлежит старой записке, не новой.

Слово tea ещё не вставляет его

textContent меняет текст узла, который уже у тебя в руках. Это не метод вставки. Список детей доски не растёт.

Текст, всё ещё отдельно

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
console.log(tea.textContent);
console.log(document.body.contains(tea));
console.log(board.children.length);

Выводы: tea, false и 1. Слово читается с объекта. Страница всё ещё показывает только milk. contains равен false, потому что узел не лежит под документом.

append ставит чай в конец

append добавляет узел последним ребёнком. Переменная fromAppend хранит результат вызова: undefined, не li. После вызова родитель — доска, а текст последнего элемента — tea. Порядок: milk, затем tea.

Прикрепить чай

javascript 
let board = document.getElementById("board");
let tea = document.createElement("li");
tea.textContent = "tea";
let fromAppend = board.append(tea);
console.log(fromAppend);
console.log(tea.parentElement === board);
console.log(board.lastElementChild.textContent);
console.log(board.children.length);

Выводы: undefined, true, tea и 2. appendChild(tea) показал бы тот же узел. Этот фрагмент appendChild не вызывает. milk всё ещё первый ребёнок-элемент.

prepend и insertBefore задают порядок

Фрагмент снова стартует с исходной доски и делает три постановки. prepend идёт, когда tea уже последний, поэтому bread становится первым ребёнком. insertBefore(eggs, milk) берёт milk как ссылку, поэтому eggs садится между bread и milk. Четыре текста: bread, eggs, milk, tea.

Поставить хлеб и яйца

javascript 
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
console.log(board.children[0].textContent);
console.log(board.children[1].textContent);
console.log(board.children[2].textContent);
console.log(board.children[3].textContent);

Выводы: bread, eggs, milk и tea. children.length равен 4. Индекс 1 — это eggs, не milk. milk сдвинулся с индекса 0 на 2, потому что перед ним встали две записки. Текст milk по-прежнему слово milk.

Текстовый узел не входит в children

Запусти этот блок на свежей доске, исходном однострочном списке, не после скрипта страницы. createTextNode строит текстовый узел. nodeType 3 значит текст. nodeType 1 значил бы элемент. children его пропускает, длина остаётся 1. childNodes его считает, длина идёт с 1 на 2. Последний элемент всё ещё записка milk. Слово salt можно увидеть в списке, и это всё равно не li.

Текстовый узел соли

javascript 
let board = document.getElementById("board");
let salt = document.createTextNode("salt");
board.append(salt);
console.log(salt.nodeType);
console.log(board.children.length);
console.log(board.childNodes.length);
console.log(board.lastElementChild.id);

Выводы: 3, 1, 2 и milk. Строка, переданная в append, например board.append("salt"), тоже становится текстовым узлом. Не li. Демо страницы ниже этой строки не содержит.

Одна строка под доской

Скрипт стоит в конце body, когда список уже есть. Он крепит tea, ставит bread вперёд и вставляет eggs перед milk. salt не создаёт. Пишет индекс 0, 1, 2 и число элементов. Четвёртый текст, tea, в строку не пишет.

Демо страницы — доска

html 
<!DOCTYPE html>
<html>
<head>
<title>create elements — page</title>
</head>
<body>
<ul id="board"><li id="milk">milk</li></ul>
<p id="line">…</p>
<script>
let board = document.getElementById("board");
let milk = document.getElementById("milk");
let tea = document.createElement("li");
tea.textContent = "tea";
board.append(tea);
let bread = document.createElement("li");
bread.textContent = "bread";
board.prepend(bread);
let eggs = document.createElement("li");
eggs.textContent = "eggs";
board.insertBefore(eggs, milk);
document.getElementById("line").textContent =
board.children[0].textContent + " / " +
board.children[1].textContent + " / " +
board.children[2].textContent + " / " +
board.children.length;
</script>
</body>
</html>

Строка становится bread / eggs / milk / 4. Сам список: bread, eggs, milk, tea. Строка останавливается на третьем пункте и затем даёт длину, поэтому tea — не последний кусок, и последний кусок — не слово. salt нет. Текст записки milk остаётся milk. Следующая страница — события. Другого способа собрать эти узлы она не добавляет.

Проверь доску

  1. Создай li и прочитай parentElement, document.body.contains, children.length и textContent. Значения: null, false, 1 и пустая строка.
  2. Поставь текст tea и прочитай текст, contains и длину. Значения: tea, false и 1.
  3. Прикрепи tea и прочитай результат вызова, совпадает ли родитель с доской, текст последнего элемента и длину. Значения: undefined, true, tea и 2. Потом запусти фрагмент порядка и прочитай bread, eggs, milk, tea.
  4. На свежей доске прикрепи текстовый узел соли и прочитай nodeType, длину children, длину childNodes и id последнего элемента. Значения: 3, 1, 2 и milk. Строка страницы: bread / eggs / milk / 4.

Ошибки на этой доске

Список по-прежнему открывается словом milk. Вызов был не тем видом вставки.

  • Ждать, что createElement("li") сразу покажет tea на доске
  • Ждать, что textContent = "tea" увеличит children.length
  • Ждать, что append вернёт li; так делает appendChild
  • Передать строку в appendChild; строка идёт в append и там становится текстовым узлом
  • Вызвать insertBefore со ссылкой, которая не ребёнок доски
  • Считать текстовый узел соли внутри children
  • Собрать новую строку через innerHTML; страница изменения HTML разбирала разметку
  • Задать здесь style.color; прошлая страница писала CSS
  • Прочитать строку как bread / eggs / milk / tea
  • Вызвать здесь remove или cloneNode; эта страница только добавляет три записки

Забери с собой

  • createElement("li") строит отдельную записку: parentElement равен null, children.length остаётся 1
  • textContent = "tea" пишет слово и оставляет узел вне доски
  • append(tea) ставит tea в конец, результат вызова — undefined
  • prepend(bread) и insertBefore(eggs, milk) дают порядок bread, eggs, milk, tea
  • createTextNode("salt") на свежей доске оставляет children.length равным 1 и nodeType равным 3
  • Строка становится bread / eggs / milk / 4, текст milk остаётся milk

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 48 из 48
Javascript Урок