Question

我对编程很陌生，但让我们继续前进。我的目标是创建一个按钮，按下它时将打印出文本。如果再按一次，它将打印出原始片段下面的文本，依此类推。基本上，如果你一直点击按钮，你会发现文本重复多次。目前我已经实现了一个按钮，按下它时会打印出文本。再次按它，它什么都不做。这是我使用的代码：

<input type="button" value="Duplicate Text" onclick="dup()"/>
<p id="clone"></p>
<script>
function dup() {document.getElementById("clone").innerHTML="Text";}
</script>

我确定我做错了什么。万分感谢。
如果您确信它应该有效，请尝试一下。它将打印出文本，但是当你第二次这样做时，它什么都不做。

Answer 1

您可以创建新元素并将它们附加到DOM，如下所示：

function display(msg) {
  var p = document.createElement('p');
  p.innerHTML = String(msg);
  document.body.appendChild(p);
}

每次调用display函数时，您提供的字符串都会添加到页面上的新段落（p元素）中，该段落会添加到{{1}的底部}。

Answer 2

我在你的问题中注意到一个jquery标签，所以你可以这样做：

   <input type="button" value="Duplicate Text" onclick="$('<p />').appendTo('body')"/>

DEMO： http://jsfiddle.net/abdennour/GZu38/1/

Answer 3

以下示例是自解释

DEMO http://jsfiddle.net/YzqML/

<script>
    function myFunction() {
        var h = document.createElement("p");
        var t = document.createTextNode("Hello World");
        h.appendChild(t);
        document.body.appendChild(h);
    }
</script>

<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>

checkbox和label

的另一个例子

DEMO http://jsfiddle.net/YzqML/1/

<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>

Answer 4

将此代码复制粘贴到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>

如何制作一个按钮，每次点击都会打印出更多文字？

4 个答案: