将 DOM 元素创建到集合的项目中

尝试从模板创建 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”元素添加到集合中唯一的一个随机元素中：

如何将此模板添加到集合中的所有元素？

你只是在创造one元素。然后你使用相同的元素appendChild多次，所以你move它从一位父母到另一位父母。

您可以使用以下方式克隆元素cloneNode(true) https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode并附加克隆：

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

旁注：您可以使用insertAdjacentHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/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 https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText.)