全棧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子樹）