如何为类的每个元素创建一个按钮？答案

【问题标题】：How can I create a button for each element of a class?如何为类的每个元素创建一个按钮？
【发布时间】：2021-03-16 18:29:36
【问题描述】：

*我正在尝试使每个具有“author-caro”类的元素都附加一个单独的按钮。我希望该按钮将人们重定向到作者的个人资料。然而，我只能将一个按钮附加到最后一个元素。我有一个用于样式化多个 div 的脚本，但显然样式化和附加的工作方式不同，因此每个元素都会更改样式，但只有一个元素会附加一个按钮。我可以做些什么来为每个带有类的元素附加一个按钮？ *

function onLoader() {
    var x = document.getElementsByClassName("author-caro");
    var i;
    var para = document.createElement("button");
    for (i = 0; i < x.length; i++) {
      x[i].appendChild(para);
        x[i].style.backgroundColor = "gray";
    }
}

.flex {
display: flex;
flex-direction: column;
}

<body onload="onLoader()">

<div class="flex">
<a class="author-caro">Yes</a>
<a class="author-caro">Yes</a>
<a class="author-robby">Yes</a>
<a class="author-robby">Yes</a>
<a class="author-caro">Yes</a>
<a class="author-robby">Yes</a>
</div>

【问题讨论】：

将 createElement 行移到循环内。当它在外面时它是一个元素，一个元素不能住在多个地方。

标签： javascript class element

【解决方案1】：

一个元素只能存在于一个地方，所以当你将它附加到另一个地方时它会移动。所以你需要为每个地方创建一个按钮。

function onLoader() {
  var x = document.getElementsByClassName("author-caro");
  var i;
  for (i = 0; i < x.length; i++) {
    var para = document.createElement("button");
    x[i].appendChild(para);
    x[i].style.backgroundColor = "gray";
  }
}

.flex {
  display: flex;
  flex-direction: column;
}

<body onload="onLoader()">

  <div class="flex">
    <a class="author-caro">Yes</a>
    <a class="author-caro">Yes</a>
    <a class="author-robby">Yes</a>
    <a class="author-robby">Yes</a>
    <a class="author-caro">Yes</a>
    <a class="author-robby">Yes</a>
  </div>

其他选择是克隆它

function onLoader() {
  var x = document.getElementsByClassName("author-caro");
  var i;
  var para = document.createElement("button");
  for (i = 0; i < x.length; i++) {
    x[i].appendChild(para.cloneNode());
    x[i].style.backgroundColor = "gray";
  }
}

.flex {
  display: flex;
  flex-direction: column;
}

<body onload="onLoader()">

  <div class="flex">
    <a class="author-caro">Yes</a>
    <a class="author-caro">Yes</a>
    <a class="author-robby">Yes</a>
    <a class="author-robby">Yes</a>
    <a class="author-caro">Yes</a>
    <a class="author-robby">Yes</a>
  </div>

【讨论】：

【解决方案2】：

您的代码看起来太旧了。我认为您应该考虑搜索最新的资源来学习。

其次，为什么要在锚标记内添加按钮？如果您需要将访问者发送到另一个页面，您需要锚点，而不是按钮。否则你需要一个按钮而不是<a>。我不明白你的方法。那bweing说，如果你想添加：

const onloader () => {
  document.querySelectorAll(".author-caro").forEach(x => {
    x.appendChild(document.createElement("BUTTON"))
  })
}

【讨论】：

谢谢！我用的是w3学校，过时了吗？
几乎总是 :)
有什么建议吗？
对于教程，Youtube 因为你可以看到哪些是新的，哪些是旧的。还有 developer.mozilla，它始终是最新的，但不适合初学者。

【解决方案3】：

function onLoader() {
    const x = document.getElementsByClassName("author-caro");
    for (let i = 0; i < x.length; i++) {
      const para = document.createElement("button");
      x[i].appendChild(para);
      x[i].style.backgroundColor = "gray";
    }
}

.flex {
  display: flex;
  flex-direction: column;
}

<body onload="onLoader()">

<div class="flex">
<a class="author-caro">Yes</a>
<a class="author-caro">Yes</a>
<a class="author-robby">Yes</a>
<a class="author-robby">Yes</a>
<a class="author-caro">Yes</a>
<a class="author-robby">Yes</a>
</div>

您必须为每次迭代（为每个元素）创建新按钮。更新了 sn-p 以解决您的问题！

另外，只是一个建议，使用const 而不是var 用于永远不会被重新分配的变量，如果它被重新分配则使用let。更多关于let 和const var v/s let v/s const

【讨论】：

【解决方案4】：

您想在具有“author-caro”类名称的元素中放置一个按钮。所以您只需要迭代“createElement”（将其放入循环中）：

function onLoader() {
let x = document.getElementsByClassName("author-caro");

for (let i = 0; i < x.length; i++) {
  let para = document.createElement("button");
   para.textContent = "click";
    x[i].appendChild(para);
    x[i].style.backgroundColor = "gray";
}}

【讨论】：