如何仅附加节点的子节点？

Question

假设以下节点（实际上不是这样生成的节点）：

let outer = document.createElement('div');
outer.innerHTML = `
  <div>foo</div>
  <div>bar</div>
  .
  .
  .
  <div>whatever</div>
`;

现在我可以将ofter附加到另一个节点：

let body = document.querySelector('body');
body.append(outer);

但是如何仅附加offer> ofter 不丢失事件听众等吗？

Answer 1

调用append（）将外部的每个孩子作为单独的参数，使用...语法来传播峰值。

body.append(...outer.children);

Answer 2

时，您不是在附加

要回答您的“不丢失事件处理程序” - 事实证明，当您没有委托

let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
  <div class="foo" onclick="console.log('Foo clicked')">foo</div>
  <div class="bar">bar</div>
  <div>whatever</div>
`;

let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);

.outer { height:100px; width:100px; border: 1px solid red;}

与身体委将

let outer = document.createElement('div');
outer.classList.add("outer")
outer.innerHTML = `
  <div class="foo">foo</div>
  <div class="bar">bar</div>
  <div>whatever</div>
`;

let body = document.querySelector('body');
body.append(outer);
body.append(...outer.children);
body.addEventListener("click", e => {  
  const tgt = e.target;
  if (tgt.matches(".foo")) console.log("Foo clicked")
  else if (tgt.matches(".bar")) console.log("Bar clicked")
})

.outer { height:100px; width:100px; border: 1px solid red;}