JavaScript第七章：一些傳統方法
過去我們常常由標記建立網頁結構，用JavaScript改變某些細節而非底層結構。這一章我們將要學習一些DOM方法，通過建立新元素和修改現有元素改變網頁結構。首先回顧過去使用的兩種技術document.write和innnerHTML。
1.document.write
document物件的write（）可以快捷地把字串插入文件中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Test</title> </head> <body> <script> document.write("<p>This is inserted.</p>"); </script> </body> </html>
document.write()的最大缺點：違背了“行為應該與表現分離”的原則
因此，把結構、行為和樣式分開永遠都是好主意。只要有可能，就應該用外部CSS檔案代替<font>標籤去設定和管理網頁的樣式資訊，最好用外部JavaScript檔案去控制網頁行為。避免在<body>部分亂用<script>標籤，避免使用document.write方法。
2.innerHTML屬性
現如今幾乎所有瀏覽器都支援屬性innerHTML，這個屬性不是W3C DOM標準的組成部分，但是已經包含到HTML5規範中。
<div id="testdiv">
<p>This is <em>my</em> content.</p>
</div>
用DOM看testdiv內的標記，是如下圖結構
用innerHTML屬性的角度來看
很明顯，innerHTML屬性毫無細節可言。要想獲得細節，就必須用DOM方法和屬性。然而，在你需要把一大段HTML內容插入網頁時，innerHTML屬性更適用，它既支援讀取，又支援寫入。你不僅可以用它來讀出元素的HTML內容，還可以用它把HTML內容寫入元素。（如下圖示例
利用這個技術無法區分“插入一段HTML內容”和“替換一段HTML內容”。一旦使用了innerHTML屬性，它的全部內容都將被替換。不過，innerHTML屬性不會返回任何對剛插入內容的引用。如果想對剛插入的內容進行處理，則需要用到DOM提供的精確的方法和屬性。
在任何時候，標準的DOM都可以用來替換innerHTML。雖說程式碼量會比較大，但是同時也提供了更高的精確性和更強大的功能。
<div id="testdiv">
</div>
window.onload=function(){
var testdiv=document.getElementById("testdiv");
testdiv.innerHTML="<p>This is<em>my</em> content.</p>";
}