重复 DIV onclick()答案

【问题标题】：Duplicate DIV onclick()重复 DIV onclick()
【发布时间】：2023-03-21 01:12:01
【问题描述】：

我试图在单击 DIV 的内容时重复其内容。

<html>
 <head>
    <script type="text/javascript" src="javascript.js"></script>
 </head>
<body>

<div id="repeatTHIS"> 
   <a>text</a><br>
   <button id="button" onclick="repeat()">text</button><br>
   <a>text</a>
</div>

</body>
</html>

javascript.js

document.getElementById('button').onclick = repeat;

var i = 0;
var original = document.getElementById('repeatTHIS');

function repeat() {
var clone = original.cloneNode(true);
clone.id = "repeatTHIS1" + ++i; 
original.parentNode.appendChild(clone);
}

我还想随机定位复制的 div，但是我什至无法让我的 DIV 重复。

编辑： DEMO

这实际上使用 jsfiddle 有效，但在使用记事本时无效

【问题讨论】：

请发jsfiddle.net 进行演示。另请记住，id 属性不是意味着重复；它们对元素来说是唯一的。请改用class。
首先了解并接受 id 应该是唯一的，并且在相同的上下文中在同一页面上具有重复的 id，错误和问题是可以预料的。
问题是当你通过 id 搜索元素时，浏览器会从页面顶部向下搜索 id。当它找到回答该 id 的 first 元素时，它 STOPS 因此您只需将处理程序附加到第一个按钮。并且您的 html 拼写错误，说“onlick”而不是“onclick”，有人在下面回答但删除了它，我不知道为什么。
@Banana - Are you?
“重复 DIV 的内容” 这几乎不是您期望发生的具体描述。

标签： javascript html

【解决方案1】：

在该元素存在之前，您将包含并运行 JS。 original 将未定义。将脚本包含在 HTML 下方：

<body> 
  <div id="repeatTHIS"> 
    <button class="button" onclick="repeat()">text</button><br>
    <button class="button" onclick="repeat()">text</button><br>
    <button class="button" onclick="repeat()">text</button>
  </div>

  <script type="text/javascript" src="javascript.js"></script>
</body>

并消除 getElementById('button') 调用，因为 (a) 它不起作用，因为 ID 必须是唯一的，并且 (b) 考虑到元素上的点击处理程序，它是不必要的。

示例：http://codepen.io/paulroub/pen/bxgIe

【讨论】：

onlick?或onclick
此外，您可以修改 javascript 以在 window.onload() 上运行。虽然我认为更安全的方法是将参考放在底部，如上所述。
@wifibrain 是的，如果我自己写这篇文章，我肯定会这样做，但我认为我们应该一次解释一件事:-)
首先，感谢大家的回复。将<script type="text/javascript" src="javascript.js"></script> 移动到 div 下方有效。或者，我尝试将function repeat() 更改为window.onload=function repeat()，但无济于事。也试过<body onload="repeat()">，但还是不行。