如何在JavaScript中复制一个div

Question

我想知道如何在JavaScript中复制几个

元素，而不需要在我的HTML代码中复制这个

？

- utopy

---

如果你正在使用jQuery，可以尝试使用.clone()方法。关于如何使用，我会让你自己去查阅。 - Terry

jquery .clone() - Marc B

我不理解所有的负投票 - 这是一个合法的问题，不是重复的。DOM API 可以很难导航，用户是新手。问题简短明了。这可能对新用户来说非常冒犯。更糟糕的是，我不理解上面两个建议，要求包含超过10,000行的代码才能执行浏览器原生支持的方法。 - Benjamin Gruenbaum

可能是 http://stackoverflow.com/questions/8542758/dynamically-duplicate-html-div-with-javascript 的重复问题。 - geedubb

@geedubb 不错的发现！以前我找不到它。我投票将另一个标记为此问题的重复，因为在我看来另一个提问得非常糟糕。 - Benjamin Gruenbaum

可能是Is it possible for Javascript to duplicate an element in the DOM?的重复问题。 - rink.attendant.6

Answer 1

假设你选择了类似于以下的 div：

var myDiv = document.getElementById("myDivId");

DOM API 包含一个 cloneNode 方法，您可以使用它。

var divClone = myDiv.cloneNode(true); // the true is for deep cloning

现在您可以将其添加到文档中

document.body.appendChild(divClone);

这里有一个简短的自包含代码示例，说明了这一点

- Benjamin Gruenbaum

---

+10 不建议在三行纯JS中使用jQuery - Popnoodles

我该如何将它复制十次？ - utopy

@utopy 您可以重复执行操作，只需确保更改 divClone 的 .id 属性，以避免出现多个 ID。如果您正在寻找 JavaScript 中的语言结构，让您在不实际编写多次的情况下多次重复操作，请查看 for 和 while 循环。请查看此页面中的基本示例部分。 - Benjamin Gruenbaum

我不明白为什么建议使用jQuery有什么不好。如果用户是JavaScript新手，让他们了解这个优秀的框架是值得的。他们可能以前从未听说过它。 - geedubb

有几点需要注意。首先，请考虑了解框架是什么（提示：jQuery不是框架）。其次，有许多原因，否则我们最终会到达这个地方。缺乏对DOM API的理解或不知道它是什么会导致一些非常糟糕的程序员。您应该在基础之上使用库 - 先学习语言和API，然后再学习抽象概念。您不想鼓励不良实践和糟糕的代码，而是要鼓励实际理解。 - Benjamin Gruenbaum

@geedubb，我并没有居高临下的意思，只是你用词不当，所以我指出了正确的方向...如果我的话听起来很粗鲁，我向你道歉，那并不是我的本意。我只是“机智地”表达了一下 ;) - Benjamin Gruenbaum