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

【问题标题】：Create DOM element into items of a collection将 DOM 元素创建到集合的项目中
【发布时间】：2021-12-13 11:16:27
【问题描述】：

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

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

【问题讨论】：

标签： javascript templates appendchild

【解决方案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。）

【讨论】：