时间戳

首页 > 解决方案 > querySelectorAll 和 appendChild 的组合不起作用

javascript - querySelectorAll 和 appendChild 的组合不起作用

问题描述

我有多个定义列表，其中包含许多dt元素。我想button在 each中追加dt，但我不知道为什么我的代码不起作用。

这是我尝试过的：

const button = Object.assign(document.createElement("button"), {
  type: "button"
})

const descriptionTerms = document.querySelectorAll("dt")
// Or should I use:
// const descriptionTerms = [...document.getElementsByTagName("dt")]?

descriptionTerms.forEach(descriptionTerm => {
  descriptionTerm.appendChild(button)
})

我究竟做错了什么？使用 最优雅的方法是什么ECMAScript 6？

标签： javascriptecmascript-6appendchildselectors-api

解决方案

您的代码不起作用，因为您试图将相同的按钮对象附加到多个父级，这是错误的。要解决此问题，请为每个创建一个按钮dt：

descriptionTerms.forEach(descriptionTerm => {
  const button = Object.assign(document.createElement("button"), {
    type: "button"
  })
  descriptionTerm.appendChild(button)
})

有关更多信息，请参阅文档：

Node.appendChild() 方法将一个节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，则 appendChild() 将其从当前位置移动到新位置（不需要在将节点附加到其他节点之前从其父节点中删除该节点）。

另一种方法是克隆现有按钮：

这意味着一个节点不能同时位于文档的两个点。因此，如果节点已经有父节点，则首先删除该节点，然后将其附加到新位置。Node.cloneNode() 方法可用于在将节点附加到新父节点之前制作节点的副本。请注意，使用 cloneNode 制作的副本不会自动保持同步。

推荐阅读