document.write

document.write();可以非常方便的把字符串插入到文檔里。
但書中對(duì)這個(gè)方法的評(píng)價(jià)并不是特別好，因?yàn)楸畴x了行為與結(jié)構(gòu)分離的原則（我的理解就是HTML\CSS\JS腳本三者分離，CSS和JS均使用外部文件調(diào)用）。

document.write();的使用方法一（內(nèi)部）：

document.write("<p>This is my blog!</p>");

document.write();的使用方法二（外部文件調(diào)用）：

//外部js腳本文件（定義一個(gè)inserP函數(shù)）
function inserP(text){
    var str = "<p>"
    str += text;
    str += "</p>"
    document.write(str);
    //"+="是變量等于變量加上后面的值：如a+=2; 實(shí)則是a= a+2;
}

//html文件
<script scr="inserP.js">
<script>
    inserP("This is my blog!");
</script>

但這種方法不容易閱讀和編輯，也無(wú)法享受行為與結(jié)構(gòu)分離的好處。

書中倡導(dǎo)，盡量少或者避免使用document.write方法。

innerHTML

如今的瀏覽器幾乎都已經(jīng)支持innerHTML，這個(gè)屬性并不是W3C DOM的標(biāo)準(zhǔn)組成部分，但現(xiàn)在已經(jīng)包含到HTML5規(guī)范中了。始于IE4瀏覽器，從那時(shí)就逐漸的被其他瀏覽器接受。

innerHTML屬性可以用來(lái)讀寫某個(gè)指定元素里的HTML內(nèi)容。
innerHTML是如何工作的。

如下面這段HTML：

<div id="testdiv">
<p>This is <em>my</em> content.</p>
</div>

用DOM的眼睛來(lái)看它們的結(jié)構(gòu)（這個(gè)圖標(biāo)我不知道怎么用markdown語(yǔ)言寫出來(lái)就直接貼圖）：

但這個(gè)在innerHTML看來(lái)則簡(jiǎn)單很多：

var divP = document.getElementById("testdiv");
alert(divP.innerHTML);

很明顯，innerHTML屬性沒有細(xì)節(jié)可言。要想獲得其中的細(xì)節(jié)，就必須使用DOM方法和屬性。便準(zhǔn)化的DOM像手術(shù)刀一樣精細(xì)，而innerHTML就像大錘子一樣粗放。

如果需要在頁(yè)面中插入一大段HTML，innerHTML最合適不過了。它支持讀寫，只要讀取到元素的位置，就可以將內(nèi)容寫進(jìn)元素中，但是如果原來(lái)的元素中已經(jīng)有內(nèi)容了，這個(gè)屬性將替換掉原來(lái)的屬性。

<div id="testdiv">
<p>This is <em>my</em> content.</p>
</div>

<script type="text/javascript">
var divP = document.getElementById("testdiv");
divP.innerHTML = "<p style='color: red;'>This is my blog.</p>"  
</script>
//最終結(jié)果是替換掉原來(lái)的內(nèi)容，輸出紅色的This is my blog.

如果這個(gè)元素中內(nèi)容為空，則直接插入。

<div id="testdiv">
</div>

<script type="text/javascript">
var divP = document.getElementById("testdiv");
divP.innerHTML = "<p style='color: red;'>This is my blog.</p>"  
</script>
//最終結(jié)果是直接輸出紅色的This is my blog.

兩者對(duì)比

innerHTML屬性比document.write更推薦使用。innerHTML可以更好的把腳本和HTML分離出來(lái)，用不著在body中插入script標(biāo)簽。

任何時(shí)候，DOM都可以用來(lái)替代innerHTML，雖然需要寫多寫代碼才能獲得同樣的效果，但DOM更精確更強(qiáng)大！