document.write和innerHTML

document.write

document.write();可以非常方便的把字符串插入到文档里。
但书中对这个方法的评价并不是特别好，因为背离了行为与结构分离的原则（我的理解就是HTML\CSS\JS脚本三者分离，CSS和JS均使用外部文件调用）。

document.write();的使用方法一（内部）：

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

document.write();的使用方法二（外部文件调用）：

//外部js脚本文件（定义一个inserP函数）
function inserP(text){
    var str = "<p>"
    str += text;
    str += "</p>"
    document.write(str);
    //"+="是变量等于变量加上后面的值：如a+=2; 实则是a= a+2;
}

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

但这种方法不容易阅读和编辑，也无法享受行为与结构分离的好处。

书中倡导，尽量少或者避免使用document.write方法。

innerHTML

如今的浏览器几乎都已经支持innerHTML，这个属性并不是W3C DOM的标准组成部分，但现在已经包含到HTML5规范中了。始于IE4浏览器，从那时就逐渐的被其他浏览器接受。

innerHTML属性可以用来读写某个指定元素里的HTML内容。
innerHTML是如何工作的。

如下面这段HTML：

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

用DOM的眼睛来看它们的结构（这个图标我不知道怎么用markdown语言写出来就直接贴图）：

但这个在innerHTML看来则简单很多：

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

很明显，innerHTML属性没有细节可言。要想获得其中的细节，就必须使用DOM方法和属性。便准化的DOM像手术刀一样精细，而innerHTML就像大锤子一样粗放。

如果需要在页面中插入一大段HTML，innerHTML最合适不过了。它支持读写，只要读取到元素的位置，就可以将内容写进元素中，但是如果原来的元素中已经有内容了，这个属性将替换掉原来的属性。

<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>
//最终结果是替换掉原来的内容，输出红色的This is my blog.

如果这个元素中内容为空，则直接插入。

<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>
//最终结果是直接输出红色的This is my blog.

两者对比

innerHTML属性比document.write更推荐使用。innerHTML可以更好的把脚本和HTML分离出来，用不着在body中插入script标签。

任何时候，DOM都可以用来替代innerHTML，虽然需要写多写代码才能获得同样的效果，但DOM更精确更强大！