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>";
    }