Попытка создать элемент DOM "gota" из шаблона. Сначала создаю шаблон:

function htmlToElement(html) {
  var template = document.createElement('template');
  template.innerHTML = html;
  return template.content.firstChild;
}

let gota = htmlToElement('<div class="gota"><div class="gota-rastro"><div class="rastro"></div></div><div class="gota-cabeza"></div></div>');

Во-вторых, я создаю коллекцию из CSS-класса "gotea" и повторяю для каждого элемента, чтобы добавить шаблон:

function gotear() {
  let gotas = document.getElementsByClassName('gotea');
  for (let i = 0; i < gotas.length; i++) {
    gotas[i].appendChild(gota);
  }
}
gotear();

Это просто добавляет элемент gota только к одному случайному элементу коллекции:

enter image description here

Как я могу добавить этот шаблон ко ВСЕМ элементам коллекции?

0
aitor 2 Мар 2021 в 11:40

1 ответ

Лучший ответ

Вы создаете только один элемент. Затем вы используете один и тот же элемент с appendChild несколько раз, поэтому вы перемещаете его от одного родителя к другому.

Вы можете клонировать элемент с помощью cloneNode(true) и добавьте клон:

gotas[i].appendChild(gota.cloneNode(true));

Боковое примечание: вы можете использовать insertAdjacentHTML вместо htmlToElement для вставки элементов, основанных непосредственно на этом HTML:

function gotear() {
    let gotas = document.getElementsByClassName('gotea');
    for (let i = 0; i < gotas.length; i++) {
        gotas[i].insertAdjacentHTML(
            "beforeend",
            '<div class="gota"><div class="gota-rastro"><div class="rastro"></div></div><div class="gota-cabeza"></div></div>'
        );
    }
}
gotear();

Конечно, это означает многократный синтаксический анализ HTML. Но если здесь бесполезно, то может пригодиться где-нибудь еще. (Также есть insertAdjacentText.)

3
T.J. Crowder 2 Мар 2021 в 08:53