javascript 1.8.7 DOM Устаревшие методы вставки/удаления

Старая школа

Эта информация помогает понять старые скрипты, но не нужна для новой разработки.

Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

Сейчас уже нет причин их использовать, так как современные методы append, prepend, before, after, remove, replaceWith более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

parentElem.appendChild(node)

Добавляет node в конец дочерних элементов parentElem.

Следующий пример добавляет новый <li> в конец <ol>:

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  let newLi = document.createElement('li');
  newLi.innerHTML = 'Привет, мир!';

  list.appendChild(newLi);
</script>

parentElem.insertBefore(node, nextSibling)

Вставляет node перед nextSibling в parentElem.

Следующий пример вставляет новый элемент перед вторым <li>:

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>
<script>
  let newLi = document.createElement('li');
  newLi.innerHTML = 'Привет, мир!';

  list.insertBefore(newLi, list.children[1]);
</script>

Чтобы вставить newLi в начало, мы можем сделать вот так:

list.insertBefore(newLi, list.firstChild);

parentElem.replaceChild(node, oldChild)

Заменяет oldChild на node среди дочерних элементов parentElem.parentElem.removeChild(node)

Удаляет node из parentElem (предполагается, что он родитель node).

Этот пример удалит первый <li> из <ol>:

<ol id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ol>

<script>
  let li = list.firstElementChild;
  list.removeChild(li);
</script>

Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node. Но обычно возвращаемое значение не используют, просто вызывают метод.

Итого

Методы для создания узлов:
- document.createElement(tag) – создаёт элемент с заданным тегом,
- document.createTextNode(value) – создаёт текстовый узел (редко используется),
- elem.cloneNode(deep) – клонирует элемент, если deep==true, то со всеми дочерними элементами.
Вставка и удаление:
- node.append(...nodes or strings) – вставляет в node в конец,
- node.prepend(...nodes or strings) – вставляет в node в начало,
- node.before(...nodes or strings) – вставляет прямо перед node,
- node.after(...nodes or strings) – вставляет сразу после node,
- node.replaceWith(...nodes or strings) – заменяет node.
- node.remove() – удаляет node.
Устаревшие методы:
- parent.appendChild(node)
- parent.insertBefore(node, nextSibling)
- parent.removeChild(node)
- parent.replaceChild(newElem, node)Все эти методы возвращают node.
Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where:
- "beforebegin" – вставляет html прямо перед elem,
- "afterbegin" – вставляет html в elem в начало,
- "beforeend" – вставляет html в elem в конец,
- "afterend" – вставляет html сразу после elem.Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement, они вставляют текстовые строки и элементы, но они редко используются.
Чтобы добавить HTML на страницу до завершения её загрузки:
- document.write(html)После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.

Практика

Создайте список

важность: 4

Напишите интерфейс для создания списка.

Для каждого пункта:

Запрашивайте содержимое пункта у пользователя с помощью prompt.
Создавайте элемент <li> и добавляйте его к <ul>.
Процесс прерывается, когда пользователь нажимает Esc или вводит пустую строку.

Все элементы должны создаваться динамически.

Если пользователь вводит HTML-теги -– пусть в списке они показываются как обычный текст.

Создайте календарь в виде таблицы

важность: 4

Напишите функцию createCalendar(elem, year, month).

Вызов функции должен создать календарь для заданного месяца month в году year и вставить его в elem.

Календарь должен быть таблицей, где неделя – это <tr>, а день – это <td>. У таблицы должен быть заголовок с названиями дней недели, каждый день – <th>, первым днём недели должен быть понедельник.

Например, createCalendar(cal, 2012, 9) сгенерирует в cal следующий календарь:https://ru.js.cx/task/calendar-table/solution/

P.S. В этой задаче достаточно сгенерировать календарь, кликабельным его делать не нужно.