一.一些传统方法
1.document.write
document对象的write()方法可以方便快捷的把字符串插入到文档里。
<script>
document.write("<p>This is inserted.</p>");
</script>
document.write的最大缺点是它违背了“行为应该与表现分离”的原则。把结构、行为和样式分开永远都是一个好主意。
2.innerHTML属性
利用innerHTML读取:
window.onload=function(){
var testdiv=document.getElementById("testdiv");
alert(testdiv.innerHTML);
}
利用innerHTML插入或替换:
window.onload=function(){
var testdiv=document.getElementById("testdiv");
testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>" //全部内容将被替换
}
二.DOM方法
DOM是文档的表示,DOM所包含的信息与文档里的信息一一对应。在浏览器看来,DOM节点树才是文档。
1.createElement方法
document.createElement(nodeName) //创建一个新的元素
例:
document.createElement("p");
var para=document.createElement("p"); //此时p元素还是一个文档碎片,它还不是任一棵DOM节点树的组成部分
2.appendChild方法
parent.appendChild(child) //将创建的元素插入节点
例:
var para=document.createElement("p"); //要插入的节点
var testdiv=document.getElementById("testdiv"); //要被插入的节点
testdiv.appendChild(para);
3.createTextNode方法
document.createTextNode(text) //创建一个文本节点
例:
var para=document.createElement("p"); //创建一个p节点
var txt=document.createTextNode("Hello world"); //创建一个文本节点
para.appendChild(txt); //将文本节点追加到p节点上
4.一个更复杂的组合
例:将下述HTML内容插入html文档
<p>This is <em>my</em> content.</p>
window.onload=function(){
var para=document.createElement("p"); //创建一个p节点赋给变量para
var txt1=document.createTextNode("This is "); //创建一个文本节点赋给变量txt1
para.appendChild(txt1); //将txt1追加到para上
var emphasis=document.createElement("em"); //创建一个em节点赋给变量emphasis
var txt2=document.createTextNode("my"); //创建一个文本节点赋给变量txt2
emphasis.appendChild(txt2); //把txt2追加到emphasis上
para.appendChild(emphasis); //把emphasis追加到para上
var txt3=document.createTextNode("content."); //创建一个文本节点赋给变量txt3
para.appendChild(txt3); //把txt3追加到para上
var testdiv=document.getElementById("testdiv"); //找到id为testdiv的节点插入新节点
testdiv.appendChild(para); //把para追加到testdiv元素上
}
三.其它的创建方法
1.在已有元素前插入一个新元素
(1)新元素:你想插入的元素(newElement)。
(2)目标元素:你想把这个元素插入到哪个元素(targetElement)之前。
(3)父元素:目标元素的父元素(parentElement)。
调用语法:
parentElement.insertBefore(newElement,targetElement);
2.在现有元素后插入一个新元素
虽然DOM本身没有提供insertAfter方法,但我们完全可以利用已有的DOM方法和属性编写一个insertAfter函数:
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){ //检查目标元素是否是parent最后一个子元素
parent.appendChild(newElement); //若是,将新元素追加到parent元素上
}else{
parent.insertBefore(newElement,targetElement.nextSibling); //若不是,将新元素插入到目标元素的下一个兄弟元素之前
}
}