以HTML和JavaScript格式复制和粘贴内容的按钮_Javascript_Html_Append

以HTML和JavaScript格式复制和粘贴内容的按钮

javascript html

以HTML和JavaScript格式复制和粘贴内容的按钮,javascript,html,append,Javascript,Html,Append,我正在尝试在网页中编写一个脚本，它将复制并粘贴一个按钮及其隐藏内容，然后附加到第一个按钮的底部。问题是我不是很懂JS 因此，当按下“添加”按钮时，按钮“测试按钮#1”将被复制并作为“测试按钮#2”附加到底部。请记住，该按钮可能在实际脚本中包含一个下拉列表，这个按钮只是缩短了，因此第二个按钮必须包含与第一个按钮相同的信息。任何帮助都将不胜感激请使用我在底部脚本的尝试作为模板： <!DOCTYPE html> <html> <head>

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


身体{
保证金：0；
最小宽度：250px；
}
.testBtn{
宽度：100%；
背景颜色：灰色；
颜色：白色；
边界：无；
}
/*标题样式*/
.标题{
背景色：黑色；
填充：30px 40px；
颜色：白色；
文本对齐：居中；
}
/*清除标题后的浮动*/
.标题：之后{
内容：“；
显示：表格；
明确：两者皆有；
边界：无；
}
/*设置“添加”按钮的样式*/
.addBtn{
填充：10px；
宽度：25%；
背景#d9d9d9；
颜色：#555；
浮动：左；
文本对齐：居中；
字体大小：16px；
光标：指针；
过渡：0.3s；
}
.addBtn:悬停{
背景色：#bbb；
}
测试按钮列表
添加
测试按钮#1
函数newElement（）{
var li=document.createElement（“按钮”）；
var inputValue=document.getElementById（“myUL”）.value；
var t=document.createTextNode（inputValue）；
li.儿童（t）；
如果（输入值===！“”）{
文件.getElementById（“myUL”）.appendChild（li）；
}
}

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


身体{
保证金：0；
最小宽度：250px；
}
.testBtn{
宽度：100%；
背景颜色：灰色；
颜色：白色；
边界：无；
}
/*标题样式*/
.标题{
背景色：黑色；
填充：30px 40px；
颜色：白色；
文本对齐：居中；
}
/*清除标题后的浮动*/
.标题：之后{
内容：“；
显示：表格；
明确：两者皆有；
边界：无；
}
/*设置“添加”按钮的样式*/
.addBtn{
填充：10px；
宽度：25%；
背景#d9d9d9；
颜色：#555；
浮动：左；
文本对齐：居中；
字体大小：16px；
光标：指针；
过渡：0.3s；
}
.addBtn:悬停{
背景色：#bbb；
}
.Btn{
填充：10px；
宽度：25%；
背景#d9d9d9；
颜色：#555；
浮动：左；
文本对齐：居中；
字体大小：16px；
光标：指针；
过渡：0.3s；
}
.Btn:悬停{
背景色：#bbb；
}
测试按钮列表
添加
测试按钮#1
函数newSample（）{
var p=document.getElementById（“testBtn”）；
var p_prime=p.cloneNode（真）；
追加子节点（p_素数）；
}

这里有几个问题

```
#myUL
```
是一个
（因此它为什么被称为
```
UL
```
是另一个谜）。通过尝试获取其值，您将其视为一个
。如果需要HTML内容，请使用
```
innerHTML
```
var t=document.createTextNode（inputValue）；。。。但是你正在创建一个文本节点，所以我不知道你还期待什么。这一切都很令人困惑
li.儿童（t）；这可能很好。您正在将文本节点附加到按钮。看起来不错
如果（输入值===！“”）{ 翻译：“如果
```
inputValue
```
与
```
true
```
相同-这永远不会发生，因为
```
inputValue
```
是字符串，
```
true
```
是布尔值。你是说
```
inputValue！==”
```

总的来说，这是一个混乱。你可能想做的是得到你的“模板”按钮并使用

.cloneNode（true）

在它上面，然后将其附加到容器中。

这可能会有帮助：这非常有用，就像我说的我对JS一点也不擅长。我只是尝试使用来自不同来源的脚本来实现这一点。您的代码中没有定义

节点

。您可能需要

p.parentNode.appendChild（p_prime）；

var li = document.createElement("button"); var inputValue = document.getElementById("myUL").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === !"") {