Створення елементів

Створити елемент можна двома способами.

Можна його прописати у властивість innerHTML батьківського елемента:

<p></p>

let p = document.querySelector('p');
p.innerHTML = '<span class="big">SPAN</span>';
p.innerHTML += ' <strong>STRONG</strong>';
p.innerHTML = '<em>EM</em> <a href="http://google.com">test</a> ' + p.innerHTML;

Другий варіант - це явне створення елементів за допомогою метода документа:

let змінна = document.createElement('назва_тега');

let p = document.createElement('p');
let price = document.createElement('strong');

При цьому елемент створюється в оперативній пам'яті, а не в DOM, не відображається в браузері.

Але з цим елементом можна робити різні маніпуляції:

p.innerHTML = 'Основна <b>мета</b> нашої зустрічі...';
p.setAttribute('title', 'Основна мета');
p.id = 'heyHo';
if (p.classList.contain('...')) { ... }
console.dir(p.parentElement);

Після створення елемент можна розмістити на сторінці, вбудувати його в DOM:

document.body.appendChild(p);
document.querySelector('.article').appendChild(p);

В першому випадку новостворений елемент добавиться в кінець body;
в другому - в кінець першого знайденого елемента з класом article.

Щоб добавити елемент в довільне місце - існує метод .insertBefore(elem, nextSibling):

document.body.insertBefore(p, document.body.firstChild);
let div = document.getElementById('hey-ho');
div.parentElement.insertBefore(p, div);

В першому випадку вставляємо наш елемент на початок body, тобто - перед першим дочірнім елементом body.

Друга і третя строки - вставка елемента перед вибраним нами елементом.

щоб вставити створений елемент після вибраного нами елемента - потрібно звернутися до його сусіда:

div.parentElement.insertBefore(p, div.nextElementSibling);

При цьому, якщо після елемента div не буде інших елементів, то конструкція div.nextElementSibling поверне null.

Якщо .insertBefore приймає null у якості другого аргумента - він добавить елемент в кінець батьківського.

Видалити елемент можна методами:

p.remove();

// раніше вищевказаного метода не було, видаляли так:
p.parentElement.removeChild(p);
let k = p.parentElement.removeChild(p);

У змінну k буде збережено видалений елемент, якщо він потрібен буде в майбутньому.

Завдання.

  1. Створіть пустий список елементів.
  2. За допомогою властивості innerHTML добавте в нього 5 елементів:
    <li id="item1">1</li>
    <li id="item2">2</li>
    ...
  3. Створіть ще один елемент: <li id="item0">0</li> і вставте його перед першим елементом списка.
  4. Перед списком вставте параграф з текстом "Список:".
  5. Порахуйте суму всіх значень елементів списку.
  6. Після списка вставте параграф з текстом "Сума цифр: ...".
  7. Спробуйте порахувати суму значень і прописати її в потрібне місце "однією командою": скористайтеся методом масивів .reduce() для перебору всіх елементів списка.

Перенесення елементів

Знайдений елемент можна перенести:

let p = document.querySelectorAll('p')[11];
let h2 = document.querySelector('h2');
h2.parentElement.insertBefore(p, h2.nextElementSibling);

document.body.appendChild(p);