Javascript 我如何制作一个每次点击都能打印出更多文本的按钮？
我对编程相当陌生，但让我们继续吧。我的目标是创建一个按钮，当按下它将打印文本。如果再按一次，它将打印出原始代码段下方的文本，依此类推。基本上，如果你一直点击按钮，你会看到文本在彼此下方重复多次。目前，我已经实现了一个按钮，当按下它打印文本。再按一下它，它什么也不做。以下是我使用的代码：Javascript 我如何制作一个每次点击都能打印出更多文本的按钮？,javascript,jquery,Javascript,Jquery,我对编程相当陌生，但让我们继续吧。我的目标是创建一个按钮，当按下它将打印文本。如果再按一次，它将打印出原始代码段下方的文本，依此类推。基本上，如果你一直点击按钮，你会看到文本在彼此下方重复多次。目前，我已经实现了一个按钮，当按下它打印文本。再按一下它，它什么也不做。以下是我使用的代码： <input type="button" value="Duplicate Text" onclick="dup()"/> <p id="clone"></p> <scr
<input type="button" value="Duplicate Text" onclick="dup()"/>
<p id="clone"></p>
<script>
function dup() {document.getElementById("clone").innerHTML="Text";}
</script>
如果你确信它会起作用，试试看。它将打印文本，但当您第二次这样做时，它什么也不做。您可以创建新元素并将它们附加到DOM中，如下所示：
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
每次调用display函数时，您给出的字符串都会添加到页面上的新段落p元素中，该元素会添加到正文的底部。我注意到您的问题中有一个jquery标记，因此您可以执行以下操作：
<input type="button" value="Duplicate Text" onclick="$('<p />').appendTo('body')"/>
下面的例子是不言自明的 演示
将此代码复制粘贴到html文件中并在浏览器中运行。如果可以包含Jquery，那么代码就会更简单
<html>
<head>
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</head>
<body>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>
您可以使用+=而不是使用=通过这种方式每次使用文本扩展字符串。这不是一个很好的解决方案。最好创建一个新元素，并将其附加到您的body或div中。就像下面的答案一样，这很有效，谢谢，但它可以用于文本以外的其他内容吗？假设我想克隆复选框和下拉列表。代码会变得稍微长一点吗？或者您需要考虑其他因素吗？这可以应用于任何元素。如果你愿意的话，我可以举个例子。我想我现在明白了，但是举个例子可能会很有用。谢谢，我又加了一个例子。
<script>
function myFunction() {
var div = document.getElementById('myItems'),
clone = div.cloneNode(true);
document.body.appendChild(clone);
}
</script>
<div id="myItems">
<label>My Label</label>
<input type="checkbox" />
</div>
<p id="demo">Click the button to clone the above items</p>
<button onclick="myFunction()">Try it</button>
<html>
<head>
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</head>
<body>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>