Мы вставили шаблон, после него другой элемент и снова попробовали вставить шаблон. В итоге шаблон оказался только один и в конце списка. Почему так произошло?

Потому что элемент только один, даже если это шаблон. Мы не можем вставить один элемент несколько раз в разные места страницы. Мы же не можем быть в нескольких местах одновременно? Вот и элементы DOM не могут.

Поэтому существует клонирование DOM-элементов. Мы можем клонировать любые элементы, в том числе шаблоны, и вставлять эти копии на страницу сколько угодно раз.

Для начала разберёмся, как работает клонирование. Для этого нужно использовать метод cloneNode. Он возвращает склонированный элемент.

Обратите внимание, у этого метода есть аргумент — булево значение. Если передать значение false, то будет скопирован сам элемент со своими классами и атрибутами, но без дочерних элементов.

element.cloneNode(false); // Вернёт склонированный элемент без вложенностей

Попробуем клонировать элемент, передать в cloneNode аргумент false и вставить такой элемент на страницу.

В следующем задании мы узнаем, что происходит, если передать в cloneNode аргумент true или вообще не передавать аргументы. Спойлер: всё странно.