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

时间 2019-11-05

标签 javascript 之路十九 html5 html 插入标记 innerhtml outerhtml 栏目 JavaScript 繁體版

原文原文链接

在需要给文档插入大量的html 标记下。经过DOM操做很是麻烦，你不只要建立一系列的节点，而且还要当心地依照顺序把它们接结起来。javascript

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

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

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

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

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

好比：chrome

<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子树，替换调用元素的所有子节点。spa

假设是不包括html元素标签的纯文档，那么结果就是设置纯文本,好比:code

div.innerHTML = "hello";

假设字符串包括 html标签，好比

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

以上写模式操做的结果例如如下:htm

<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子树）

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

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