首页 > 代码库 > 全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

全栈JavaScript之路(十九)HTML5 插入 html标记 ( 一 )innerHTML 与outerHTML

在需要给文档插入大量的html 标记下,通过DOM操作很麻烦,你不仅要创建一系列的节点,而且还要小心地按照顺序把它们接结起来。


利用html 标签 插入技术,可以直接插入html代码字符串,简单、高效!


以下插入html标签相关的扩展已经纳入html5 规范.

  • 1.innerHTML 属性
  • 2.outerHTML 属性
  • 3.insertAdjacentHTML 方法


innerHTML 属性 有两种模式,写模式与读模式。

               

     在读模式下,返回的是html 代码字符串。

例如:

<div id="outer">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
     </ul>
</div>

对于上面的 div 来说 读模式返回的是以下html代码字符串

<p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

这里要注意,不同的浏览器返回文档格式不同!   IE 与 Opear 返回的 html元素标签 都是大写的,而 火狐,chrome, safari,等 原原本本的返回。

不要指望所有的浏览器都返回相同的子符串!


在写模式下,innerHTML属性的值 会被解析为DOM子树,替换调用元素的所有子节点。


如果是不包含html元素标签的纯文档,那么结果就是设置纯文本,例如:

div.innerHTML = "hello";


如果 字符串包含 html标签,例如

div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";

以上写模式操作的结果如下:

<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div>

 设置了innerHTML 之后,可以像访问文档中的其他节点一样访问新创建的节点。


为innerHTML 设置HTML 字符串后,浏览器会将这个字符串解析为相应的DOM树。因此设置了innerHTML 之后,再从中读取HTML 字符串,会得到与设置时不一
样的结果。原因在于返回的字符串是根据原始HTML 字符串创建的DOM树经过序列化之后的结果。


使用innerHTML属性也有一些限制:

插入<script> 标签,IE8及以前的版本,是唯一能运行里面脚本的浏览器,且必须满足一定条件!

  • 一是必须为<script>元素指定defer 属性
  • 二是<script>元素必须位于(微软所谓的)“有作用域的元素”(scoped element)之后。


大多数浏览器都支持以直观的方式通过innerHTML 插入<style>元素。

div.innerHTML = "<style type=\"text/css\">body {background-color: red; }</style>";

但在IE8 以及更早的版本中:

div.innerHTML = "_<style type=\"text/css\">body {background-color: red; }</style>"; //<script>,<style> 在IE中属于 "无作用域"的元素,也就是不显示的元素。
div.removeChild(div.firstChild);

并不是所有的html元素都支持 innerHTML属性: 

不支持innerHTML的元素有: <col>,<colgroup>,<frameset>,<head>,<html>,<style>,<table>,<tbody>,<thead>,<tfoot>,<tr>

此外,IE8以及更早IE版本,<title> 也没有innerHTML属性。



outerHTML 与  innerHTML 的不同点:  在读模式下,outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下,outerHTML
会根据指定的HTML 字符串创建新的DOM 子树,然后用这个DOM子树完全替换调用元素。(而不仅仅是调用元素的DOM子树)