通过创建新元素和修改现有元素而改变网页结构的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);
}
var para=document.createElement("p");
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
var txt=document.createTextNode("Hello World");
para.appendChild(txt);
}
<
div
id
="testdiv"
>
</ div >
</ 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);
}
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文件创建网页元素是个好的选择,它只能作为非常规武器使用。