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 的次数控制在合理范围内。

DOM扩展之HTML5 插入标记的更多相关文章

  1. DOM扩展之 HTML5

    11.3.1 与类相关的扩充 2. classList属性 在操作类名时,需要通过className属性添加,删除和替换类名.因为className是一个字符串,所以即使只修改一部分内容也要设置整个字 ...

  2. DOM扩展-HTML5、专有扩展

     HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...

  3. HTML5学习笔记（二十四）：DOM扩展

    DOM扩展 DOM标准扩展最开始都是来自各个浏览器的自定义扩展DOM的功能,后被收录为标准的DOM相关API. 本笔记只记录被各大浏览器支持的标准扩展,对于特定浏览器的专有扩展不讨论. 选择符API ...

  4. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  5. dom扩展

    第十一章 DOM扩展 一.选择符API 1.querySelector()方法             接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. 2. ...

  6. DOM扩展札记

    Selector API HTML5 DOM扩展 Element Traversal规范 Selector API 众多JavaScript库中,最常用的一个功能就是根据css选择符选择与某个模式匹配 ...

  7. 11. javacript高级程序设计-DOM扩展

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  8. js-DOM，DOM扩展

    DOM: 1. 了解节点的信息:nodeName(属性的标签名),nodeValue两个属性 在取得信息之前要进行判断是不是节点,节点类型由12个数值常量进行表示 2.每个节点都有一个childNod ...

  9. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

随机推荐

  1. 解决首次访问jenkins，输入默认密码之后，一直卡住问题

    简介   安装系统:centos6.5 安装方式:在官网中下载jenkins.war,放到tomcat根目录下的webapps中,启动tomcat(还有一种yum在线安装的方式) 1.首次访问,出现如 ...

  2. HTML 格式化等处理方法

    1.处理特殊字符串,清除空格,换行等 function DeleteHtml($str) { $str = trim ( $str ); // 清除字符串两边的空格 $str = preg_repla ...

  3. 设计模式学习笔记－Adapter模式

    Adapter模式,就是适配器模式,使两个原本没有关联的类结合一起使用. 平时我们会经常碰到这样的情况,有了两个现成的类,它们之间没有什么联系,但是我们现在既想用其中一个类的方法,同时也想用另外一个类 ...

  4. javascript之AJAX学习

    1.AJAX即Asynchronous Javascript+XML.能够向服务器请求额外的数据而无需卸载页面.  AJAx技术的核心是XMLHttpRequest对象(XHR). 2.AJAX只能向 ...

  5. 关于java中创建文件，并且写入内容

    以下内容完全为本人原创,如若转载,请注明出自:http://www.cnblogs.com/XiOrang/ 前两天在项目中因为要通过http请求获取一个比较大的json数据(300KB左右)并且保存 ...

  6. git push命令

    git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pull命令相仿. $ git push <远程主机名> <本地分支名>:<远程分支名> ...

  7. TortoiseGit流程安装使用手册

    end if

  8. 安装CAD2006装好了为什么不能用,显示系统错误无法启动此程序，因计算机丢失aclst.dll。尝试重新安装该程序以解

    我的电脑,右键 属性——>高级选项卡(win7的是高级系统设置)——>环境变量——>系统变量——>然后新建系统变量 变量名为:AutoCAD 变量值为:c:\program f ...

  9. spark发行版笔记10

    感谢DT大数据梦工厂支持提供技术支持,DT大数据梦工厂专注于Spark发行版定制. 本期概览: 数据接收全生命周期的思考 大数据处理框架中,最重要的就是性能,性能是排在前面的.其次再考虑其他的.因为数 ...

  10. bzoj 3530: [Sdoi2014]数数

    #include<cstdio> #include<iostream> #include<cstring> #define M 1509 #define MO 10 ...