动态创建HTML内容

通过创建新元素和修改现有元素而改变网页结构的DOM方法。

示例一：创建一个“Hello World”的文本节点

window.onload = function () ... {
var para=document.createElement("p");
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
var txt=document.createTextNode("Hello World");
para.appendChild(txt);
}

test.html网页只要代码：

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

 

示例二：创建一个<p>this is <em>my</em> content.</p>的HTML内容。

window.onload = function () ... {
var para=document.createElement("p");
var txt1=document.createTextNode("this is");
para.appendChild(txt1);
var emphasis=document.createElement("em");
var txt2=document.createTextNode("my");
emphasis.appendChild(txt2);
para.appendChild(emphasis);
var txt3=document.createTextNode("content.");
para.appendChild(txt3);
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
}

 

二、插入新节点的DOM方法及属性
1、insertBefore()方法
2、insertAfter()方法
3、appendChild()方法
4、parentNode属性
5、lastChild属性
6、nextSibling属性

利用上面的DOM方法及属性可以把网页中这两个元素放在showPic.js文件里来创建，而不用再html文件里创建。
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery"/>
  <p id="description">Choose an image.</p>

由于：
1、网页的结构由HTML文档负责创建，JavaScript函数只用来改变HTML文档的某些细节而不改变其底层架构。
2、把结构、行为和样式分开永远是个好主意。只要有可能，就应该用外部CSS文件代替<font>标签去设定和管理网页的样式信息，就应该用外部JavaScript文件去控制网页的行为。

根据如上两个原则，我不认为在外部JavaScript文件创建网页元素是个好的选择，它只能作为非常规武器使用。