我正在尝试在网页中编写一个脚本，该脚本将复制并粘贴一个按钮及其隐藏内容，然后附加到第一个按钮的底部。问题是我对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>
所以这里有几个问题。
-
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 === ！"( {翻译："if
inputValue与true相同" - 这永远不会发生，因为inputValue是一个字符串，true是一个布尔值。你是说inputValue !== ""吗？
总的来说，这是一团糟。您可能想要做的是获取"模板"按钮并在其上使用.cloneNode(true)，然后将其附加到容器中。