如何克隆元素并用克隆的元素替换现有元素？答案

【问题标题】：How to Clone an element and replace and existing element with the cloned one?如何克隆元素并用克隆的元素替换现有元素？
【发布时间】：2013-01-26 04:22:57
【问题描述】：

我正在尝试使用从 ajax 调用获得的大约 5000 个选项填充一个选择框。我想使用相同的数据来更新其他 8 个选择框。我正在使用prototype.js 并使用 .update() 函数。但问题是它冻结了 IE 和 Chrome 一段时间。因此，我尝试使用 .update() 函数创建第一个选择框，然后克隆选择框并用它替换其他 8 个选择框。请建议这是否会提高性能以及我如何实现这一点。

【问题讨论】：

如果这只是 jQuery 的标签：var clone = $('element').clone(); $('element').replaceWith(clone);
这里有一些示例代码jsfiddle.net/marifrahman/hHgyX/2
我有一个解决办法：jsfiddle.net/marifrahman/hHgyX/5;但我仍然不确定它是否真的能提高性能。请提出建议。

标签： javascript html dom prototypejs

【解决方案1】：

因为您将如此多的选项推送到选择框中，所以主 javascript 线程正在完成所有工作以将元素填充到 DOM 中（无论 JS 框架如何）。将来您将能够在不阻塞主线程的情况下分拆 WebWorker 线程来完成这项工作，但在所有浏览器（嗯 IE）都支持它之前，我不建议实施它。

我有 2 条建议

不要同时填充所有下拉列表，而是让这些 Ajax.Autocomplete 字段通过 ajax 查询结果。
让下拉菜单分阶段显示 - 在选择第一个下拉菜单后clone() 然后显示下一个 - 结果相同，但延迟会随着时间的推移而中断

【讨论】：