Javascript 使用innerHTML加载html片段时出现的奇怪问题

我有一个用于opera的userjs脚本，它显示自己的界面，目前使用DOM方法创建元素。这很好，但很难维护，因为接口与代码绑定。因此，我正在寻找一种将布局与代码分离的方法。另外，我想让事情保持简单，我真的不想依赖框架（jquery…）来实现这一点。我不关心跨浏览器功能，这东西只能在opera上使用

我把所有的样式都输入到css中，这很有帮助。现在我正在寻找一种抽象布局的方法。UI的很大一部分是动态的，所以我不能只使用一个大的静态html。产生的想法是使用一段html，其中包含不同UI部分的布局，从中提取片段，并根据需要将所有内容放在一起

这在某种程度上效果相当不错：

• 创建

  div

  ，不要将其设置为父级
• 使用

  .innerHTML

  将html加载到其中
• 使用此选项可以在其中查找小部件
• 使用

  widget.cloneNode（true）

• 家长等等

我知道

cloneNode（）

存在一些问题（复制ID的风险，克隆中缺少事件处理程序），但我可以解决这些问题

问题是，在加载

.innerHTML

时，我从当前的DOM代码中得到了不同的结果，即使我使用了DOM代码版本中捕获的布局！我以桌子为例看到了这一点。简单来说

<table><tr><td></td></tr></table>

我对这一切有一种强烈的感觉

• DOM和html布局之间还有其他大的区别吗
• 也许我真的应该在DOM中使用

• 你会怎么做

奖金问题：

• createDocumentFragment（）

  存在的原因是什么？你能用它做什么，否则就做不到

---

你说得对，它看起来像一个标记没有定义

的表，在读取表的

内部HTML

属性时，它将被转换为带有

标记的标记

但这不会给您带来太多麻烦：至于CSS问题，请从选择器中删除

（仅限于直接后代）

---

DocumentFragment

的一个可能好处是，当您需要进行大量的DOM操作时，如果只操作一个文档片段，并且在完成所有转换后，将其附加到DOM，则可能会带来一些性能提升。

谢谢，我在想，也许使用

DocumentFragment

可以使用

getElementById

之类的东西，这在未登录的节点中是不可用的……更新了css规则，这很有帮助。仍然存在一些奇怪的差异，需要进行更深入的研究…根据使用XHTML时DOM与源XML的对应关系更为密切。也可以试试，我目前正在使用html。。。

table > tr > td { ... }