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. jquery阻止元素冒泡的两种方法

    通常情况下,如果给父元素添加事件之后,子元素也会继承同样的事件,这个时候就要阻止子元素的这种行为,成为阻止冒泡,总结两种解决方法: html代码: <div id="parent&qu ...

  2. jquery trigger 触发事件小计 -- 关于a标签

    jquery -- trigger触发执行事件方法虽然好用,偶尔也会出些小问题. 在最近得一个项目中需要触发a标签的点击事件时,我就遇到了点小问题.我很想当然的写层这样:$("a" ...

  3. MySQL update时使用联表，聚合

    原文地址 http://stackoverflow.com/questions/3022405/mysql-update-query-with-left-join-and-group-by UPDAT ...

  4. 关于absolute 和 relative 定位的定义

    absolute的英文意思是绝对的意思,实际上是针对父级元素元素定位,如果父级元素没有position:relative|absolute,则追至再上一个父级元素,直至相对于文档的左上角定位,按照我们 ...

  5. 学习PYTHON之路， DAY 5 - PYTHON 基础 5 (装饰器，字符格式化，递归，迭代器，生成器)

    ---恢复内容开始--- 一 装饰器 1 单层装饰器 def outer(func): def inner(): print('long') func() print('after') return ...

  6. 学习PYTHON之路， DAY 4 - PYTHON 基础 4 (内置函数)

    注:查看详细请看https://docs.python.org/3/library/functions.html#next 一 all(), any() False: 0, Noe, '', [], ...

  7. C#如何通过Socket的方式获取httponly cookie

    正常情况下C#可以使用HttpWebRequest.HttpWebResponse和CookieContainer类来获取Cookie,但是当Cookie设置为httponly,我们就不能用上面的方法 ...

  8. Python笔记总结week4

      1. Built-in functions 函数可能遇到的问题:下面例子函数改变了函数需要传入的参数 li = [11,22,33,44] def f1(arg): arg.append(55) ...

  9. interface

    接口的简单案例: 接口 就是一种规范 其目的主要是为了约束和解耦 public class Test { public static void main(String[] args){ Compute ...

  10. [MISSAJJ原创] UITableViewCell移动及翻转出现的3D动画效果［58同城cell移动效果］

    2015-11-20 很喜欢在安静的状态, 听着音乐,敲着键盘, 和代码们浓情对话, 每一份代码的积累, 都让自己觉得很充实快乐!Y(^_^)Y. 看到58同城app的cell有动画移动出现的特效,很 ...