Question

我正在尝试在网页中编写一个脚本，该脚本将复制并粘贴一个按钮，它是隐藏的内容，然后附加到第一个按钮的底部。问题是我在JS中不是很懂。

因此，当按下“添加”按钮时，按钮“测试按钮＃1”将被复制并作为“测试按钮＃2”附加到底部。请记住，按钮可能在实际脚本中包含一个排序下拉列表，这个按钮只是缩短了，因此第二个按钮必须包含与第一个按钮相同的信息。任何帮助将非常感谢。

请使用我对底部脚本的尝试作为模板：

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
      margin: 0;
      min-width: 250px;
    }

    .testBtn {
      width: 100%;
      background-color: grey;
      color: white;
      border: none;
    }

    /* Style the header */
    .header {
      background-color: black;
      padding: 30px 40px;
      color: white;
      text-align: center;
    }

    /* Clear floats after the header */
    .header:after {
      content: "";
      display: table;
      clear: both;
      border: none;
    }


    /* Style the "Add" button */
    .addBtn {
      padding: 10px;
      width: 25%;
      background: #d9d9d9;
      color: #555;
      float: left;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s;
    }

    .addBtn:hover {
      background-color: #bbb;
    }
    </style>
    </head>
    <body>

    <div id="myDIV" class="header">
      <h2 style="margin:5px">Test Button List</h2>
      <span onclick="newElement()" class="addBtn">Add</span>
    </div>

    <div class="myUL" id="myUL">
      <button class="testBtn">Test Button #1</button>
    </div>

    <script>
    function newElement() {
      var li = document.createElement("button");
      var inputValue = document.getElementById("myUL").value;
      var t = document.createTextNode(inputValue);
      li.appendChild(t);
      if (inputValue === !"") {
        document.getElementById("myUL").appendChild(li);
      }
    }
    </script>

    </body>
    </html>

################# EDITED

我尝试了node.clone（）方法，但仍无法附加按钮。有什么建议吗？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  min-width: 250px;
}

.testBtn {
  width: 100%;
  background-color: grey;
  color: white;
  border: none;
}

/* Style the header */
.header {
  background-color: black;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
  border: none;
}


/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.addBtn:hover {
  background-color: #bbb;
}
.Btn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.Btn:hover {
  background-color: #bbb;
}
</style>
</head>
<body>

<div id="myDIV" class="header">
  <h2 style="margin:5px">Test Button List</h2>
  <span onclick="newSample()" class="addBtn">Add</span>
</div>

<div class="testBtn" id="testBtn">
  <button class="Btn">Test Button #1</button>
</div>

<script>
      function newSample() {
        var p = document.getElementById("testBtn");
        var p_prime = p.cloneNode(true);
        node.appendChild(p_prime);
      }       
    </script>
</body>
</html>

Answer 1

所以这里有一些问题。

```
var li = document.createElement("button");
```
如果是<button>，为什么要调用它var li？在这里使用有意义的名称。
```
var inputValue = document.getElementById("myUL").value;
```
#myUL是<div>（所以为什么它被称为UL是另一个谜）。通过尝试获取其值，您将其视为<input />。如果您需要HTML内容，请使用innerHTML ...
```
var t = document.createTextNode(inputValue);
```
...但你正在创建一个文本节点，所以我不知道你还在期待什么。这一切都让人非常困惑。
```
li.appendChild(t);
```
这可能很好。您将文本节点附加到按钮。好像没事。
```
if (inputValue === !"") {
```
翻译：“如果inputValue与true相同” - 这种情况永远不会发生，因为inputValue是一个字符串而true是一个布尔值。您的意思是inputValue !== ""吗？

总的来说，这是一团糟。您可能想要做的是获取“模板”按钮并在其上使用.cloneNode(true)，然后将其附加到容器中。

复制和粘贴按钮，其中包含HTML和JavaScript中的内容

1 个答案: