替换/添加几个DOM元素：高效且健壮的方法？

Question

我正在寻找一种有效的方法来替换几个DOM元素 - 如果可能只在一个动作中。 增加TextNodes需要它。如果存在某个单词，则应将其包装在span-Tags中，以后需要为其分配事件处理程序。

因此，如果文本节点包含需要转出的单词

-#textNode

到

- #textNode
- span
  - #textNode
- #textNode

同时保持文档的其余部分不受影响。

已知/假定的问题： - innerHTML会很快，但是Elements需要有一个生成的ID，稍后再通过getElementByID检索;不是最干净/最快的方式。 - 克隆节点，将其放入documentFragment，执行所有操作并将其替换回来会很好 - 但据我所知，克隆确实会丢弃事件处理程序。由于此代码将用于Bookmarklet / Add-On，​​因此这不是一个选项。

Answer 1

在Text节点上使用DOM Level 1 Core方法splitText，一次在目标文本之后的点，然后就在之前。 createElement新的span，replaceChild中间文本节点（包含目标文本）和appendChild文本节点进入范围。根据需要在跨度中添加事件处理程序等。

无需开始弄乱innerHTML或聪明的Range / adjacentHTML黑客攻击;你真的不会比这更快。不要相信炒作：像splitText或单个插入这样的DOM操作根本不会很慢。只有当您尝试同时操作大量连续节点时，其他方法才能改善问题。