Javascript 是不是可以复制 DOM 中的元素？ [复制]

Posted 2023-02-22

【中文标题】Javascript 是不是可以复制 DOM 中的元素？ [复制]

【英文标题】：Is it possible for Javascript to duplicate an element in the DOM? [duplicate]Javascript 是否可以复制 DOM 中的元素？ [复制]

【发布时间】：2011-10-14 15:35:43

【问题描述】：

我有一个从 php 查询数据库创建的下拉菜单，然后使用 foreach 循环为该下拉菜单创建选项列表。

但是，在我的表单中，用户可能需要输入更多相同的字段，所以我想知道是否可以让 javascript 复制一个像下拉菜单一样的元素及其所有值，然后将其复制到同一个表单中？

为什么我会这样想，因为我似乎找不到将 PHP 数组传递给 JavaScript 的方法，或者至少我找不到方法：(

【参考方案1】：

请不要为此使用 jQuery！ jQuery 很棒，但是像这样简单的东西包含整个库是没有意义的。除非您已经使用 jQuery，否则您应该使用 Javascript 的 cloneNode() 函数。当然你也可以使用 Ajax 与 PHP 进行通信，但是“只”Javascript 更快更容易。

【讨论】：

我打算发布自己的答案，但您的方法几乎相同。所以，如果你允许，我会提供一个JS Fiddle demo, using cloneNode()。

【参考方案2】：

是的，您可以使用 DOM 方法来实现，但更好的是，使用 jQuery 并查看 clone 方法：http://api.jquery.com/clone/。

您可以通过将 PHP 数组序列化为 JSON 对象将其传递给 Javascript，但这是另一回事。

【讨论】：

不是你错了，而是'更好'？

【参考方案3】：

我不记得普通的 javascript 方式，使用 jQuery 你可以使用clone 方法，但是我不会使用这种方法，因为你会得到相同的帖子名称。除非您需要动态表单，否则最好在 php 中执行此操作。在这种情况下，克隆是解决方案，但在这样做时请注意输入名称。

【讨论】：

简单的方式是element.cloneNode()。不难。 :-)

我对这个问题投了反对票，因为截至 2011 年，这个答案不应该被认为是规范的。

【参考方案4】：

你的意思是像

<select name="top5" size="5" multiple="">
  <option>Heino</option>
  <option>Michael Jackson</option>
  <option>Tom Waits</option>
  <option>Nina Hagen</option>
  <option>Marianne Rosenberg</option>
</select>

这允许您选择多个选项 (enter link description here)

【讨论】：

是的，我的意思是这样的。

【参考方案5】：

如果你想将一个 php-array 传递给 javascript，你实际上可以执行以下操作：

var php_array = eval('(' + <?php echo json_encode($php_array); ?> + ')');