正文

DOM扩展之HTML5 插入标记

IP云
IP云V管理员/9 阅读
08/21
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

11.3.6 插入标记

当需要在文档中插入大量的HTML标记时，通过DOM操作就会是非常麻烦的，相对而言，使用插入标记的技术，直接插入HTML字符串不仅简单而且更快。以下插入标记相关的DOM操作已经纳入了HTML5规范。

1. innerHTML 属性

在读模式下，innerHTML属性返回调用元素所有的子节点对应的HTML标记，包括元素，注释和文本节点。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用该DOM树完全替换调用元素的所有的子节点。

不是所有的元素都支持innerHTML属性。不支持的属性有：<col> <colgroup> <frameset> <head> <html> <style> <table> <tbody> <thead> <tfoot> 和<tr>。(在chrome中测试了tbody，是可以用的。所以在使用的时候最好测一下。)

IE8提供了一个方法window.toStaticHTML()，这个方法接受一个HTML字符串参数，返回一个经过无害处理后的版本。

2. outerHTML

与innerHTML类似，只不过无论是读模式还是写模式，都包括调用元素本身。即在读模式下，outerHTML返回调用它的元素及所有子元素的HTML表情；在写模式下，outerHTML会根据指定的HTML字符串创建DOM树，然后用该DOM树完全替换调用元素。

3. insertAdjacentHTML()方法

该方法接受两个参数，插入位置和要插入的HTML文本。第一个参数可取以下值：

  • beforebegin, 在当前元素之前插入一个紧邻的同辈元素；
  • afterbegin, 在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
  • beforeend, 在当前元素之下插入一个新的子元素或者在最后一个子元素下插入新的子元素；
  • afterend, 在当前元素之后插入一个紧邻的同辈元素。

4. 内存与性能

A. 以上方法在替换子节点的时候，如果被替换的子节点有绑定事件处理程序，元素与事件处理程序之间的绑定关系并没有一并删除。所有在使用上述方法时，最好先手动删除要被替换的元素的所有事件处理程序。

B. 在使用 innerHTML 或 outerHTM L属性插入HTML标签时，就会创建一个HTML解析器。这个解析器是在浏览器级别的代码基础上运行的，因此比使用DOM操作时执行JavaScript快的多。

但创建和销毁HTML解析器也会带来性能损失，所以最好将设置innerHTML 和 outerHTML 的次数控制在合理范围内。