[JS] 005_动态创建HTML内容

 

（1）使用document.write()

（2）使用innerHTML

innerHTML可以用来读写某给定元素里的HTML内容。

举例：

<div id="testdiv">

<p>this is <em>my</em>content</p>

</div>

window.onload = function(){

Var testdiv = document.getElementById("testdiv");

alert(testdiv.innerHTML);

}

 

输出：<p>this is <em>my</em>content</p>

 

innerHTML的属性：只有一个取值为<p>this is <em>my</em>content</p>的字符串。

可见：innerHTML属性无细节可言，而DOM提供的方法和属性则可以让我们对div节点中的任何一个进行细节的访问。但是，当你需要把一大段的HTML内容插入一个网页时，innerHTML会更加实用。不仅可以读取元素的HTML内容，还可以用它把HTML内容写入元素。请注意，标准的DOM是可以替代innerHTML的，只是要多编写一些代码。

 

举例：

<div id = "testdiv">

</div>

 

Window.onload = function(){

  var testdiv = doucument.getElementById("testdiv");

testdiv.innerHTML = "<p>this is <em>my</em>content</p>";

}

 

（3）理解以动态的方式创建HTML内容

改变DOM节点树就能以动态的方式创建HTML内容

根据DOM，一个文档就是一棵节点树，如果想把一些HTML的内容【p/ul/li】添加到文档中，就必须在相应的DOM节点树上插入元素节点。如果想要在节点树上添加内容【文本，属性，元素】，就必须插入新的节点。

  

（4）使用DOM

① 插入新的元素节点

createElement()：创建元素节点

appendChild()：将节点插入节点树

 

举例：

<div id = "testdiv">

</div>

 

现在我们以DOM的标准而不是innerHTML的标准来改变DOM节点树。

步骤

1）创建一个新的元素

Var para = document.createElemnet("p");

在这一步之后，p元素以in个有了一个nodeType和nodeName属性

 

2）把这个新元素插入节点树

首先，我们要获取要插入的节点的父节点，因为p节点是div的子节点，因此，我们要获得div节点。因此，现在的操作如下：

 

//1 获取父节点

var testdiv = doucment.getElementById("testdiv");

//2 创造新的子节点

Var para = document.createElemnet("p");

//3 将新的子节点插入到父节点中

testdiv.appendChild(para);

 

② 创建新的文本节点

createTextNode():创建文本节点

 

//1 创建文本节点

var txt = document.createTextNode("hello world");

//2 找到要插入的节点

var p = document.getElementByTagName("p");

//3 在都没中插入文本节点

p.appendChild(txt);

 

③ insertBefore():把一个新元素插入到一个现有元素之前

 

（5）总结

① 使用document.write()方法/innerHTML属性/DOM方法都能够想浏览器里的文档动态添加HTML内容。

② 使用createElement或是createTextNode方法创建的节点是JS世界的孤儿，你还需要使用appendChild()方法或者insertBefore()方法把这些"碎片"对象插入到某个文档的节点树上才能让他们呈现在浏览器的窗口里。

③ 在需要检索文档的现有信息时，以下的DOM方法最有用

getElementById()

getElementByTagName()

getAttribute()

 

④ 在需要把信息添加到文档里去时，以下DOM方法最有用

createElement()

createTextNode()

appendChild()

insertBefore()

setAttribute()