全栈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 & welcome, <b>"reader"!</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子树）