时间戳

首页 > 解决方案 > 带有 HTML 和 JavaScript 内容的复制和粘贴按钮

javascript - 带有 HTML 和 JavaScript 内容的复制和粘贴按钮

问题描述

我正在尝试在网页中编写一个脚本，该脚本将复制和粘贴一个按钮，它是隐藏的内容，然后附加在第一个按钮的底部。问题是我不是很懂 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>
#################已编辑

我尝试了 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>

标签： javascripthtmlappend

解决方案

所以这里有几个问题。

  • 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)在其上使用，然后将其附加到容器中。

推荐阅读