innerHTML相关

在读模式下,innerHTML属性返回与调用元素所有的子节点(包括元素、注释、和文本节点)对应的HTML标记。
在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。
不同浏览器返回值标签大小写不同。

并不是所有元素都支持innerHTML属性,比如:

<col>、<colgroup>、<head>、<html>、<style>、<table>、<tbody>

等。

尤其注意的是,因为innerHTML作为写入模式时,会重新创建新的DOM树,所以之前注册的事件会无效,此点尤其需要注意。比如今天在进行webapp编写时,用innerHTML生成的内容无法进行有效的事件绑定。可以使用appendChild代替一部分功能。

同时,在插入大量新的HTML标记时,使用innerHTML属性与通过多次DOM操作创建节点再指定它们的关系相比,效率要高得多。这是因为设置innerHTML与outerHTML时,就会创建一个HTML解析器,这个解析器是在浏览器级别的代码(通常是c++编写)基础上运行,因此比js快得多。不过调用这个HTML解析器也会造成性能损失,所以如果要插入大量内容,应该将大量内容整合后再innerHTML较好。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据