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

Question

正在尝试从模板创建 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 class“gotea”创建集合并迭代每个元素以附加模板：

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

这只是将“gota”元素添加到集合中的唯一一个随机元素：

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

Answer 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。）

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

Create DOM element into items of a collection

javascript

templates

appendchild