在DOM看来,一个文档就是一棵节点树,如果想在节点树上添加内容,就必须插入新的节点。如果你想添加一些标记到文档,就必须插入元素节点。
1.createElement方法
<div id="testdiv">
</div>
如果想把一段文本插入testdiv元素,用DOM语言就是想添加一个p元素节点,并把这个节点作为div节点的一个子节点。
其中第一步骤则需要用到DOM方法createElement来完成。无论何时,只要使用了createElement方法,就应该把新创建出来的元素赋给一个变量就总是个好主意。
变量para现在包含了一个指向刚创建出来的那个p元素的引用。虽然这个p元素已经存在,但它还不是任何一棵DOM节点树的组成部分,这时候被称为文档碎片,还无法显示在浏览器的窗口画面里。
window.onload=function(){
var para=document.createElement("p");
var info="nodeName:";
info+=para.nodeName;
info+="nodeType:";
info+=para.nodeType;
alert(info);
}
2.appendChild方法
把新创建的节点插入某个文档的节点树的最简单方法是:让它成为这个文档某个现有节点的一个子节点。
var testid=document.getElementById("testdiv");
var para=document.createElement("p");
testdiv.appendChild(para);
3.createTextNode方法
如果需要创建一个文本节点,可以用createTextNode方法来实现。
window.onload=function(){
var para=document.createElement("p");
var text=document.createTextNode("Hello world");
var testdiv=document.getElementById("testdiv");
para.appendChild(text);
testdiv.appendChild(para);
}
4.一个更复杂的组合
在上一节介绍传统方法中的innerHTML属性中,我们使用了如下的HTML内容
<p>This is <em>my</em> content.</p>
window.onload=function(){
var para=document.createElement("p");
var text1=document.createTextNode("This is");
para.appendChild(text1);
var emphasis=document.createElement("em");
para text2=document.createTextNode("my");
emphasis.appendChild(text2);
para.appendChild(emphasis);
var text3=document.createTextNode("content.");
para.appendChild(text3);
var testdiv=document.getElementById("testdiv");
testdiv.appendChild(para);
}