传统方法
-
使用document.write
它最大的缺点就是违背了"行为应该与表现分离"的原则。
<html>
<head>
<script>
function insert(){
document.write("<p>This is inserted</p>");
}
</script>
</head>
<body>
<button onclick="insert()">显示</button>
</body>
</html>
-
使用innerHTML
利用这个方法无法确认是插入还是替换一段HTML内容。如果是插入一大段的HTML代码的话使用这个方法比较好。但它不会返回任何对刚插入的内容的引用
window.onload=function(){
var testdiv=document.getElementById("testdiv");
//alert(testdiv.innerHTML); //读取标记
testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>"; //写入标记
}
-
使用DOM
DOM是一条双向车道。不仅可以获取文档的内容，还可以更新文档的内容。
createElement、appendChild、createTextNode的使用
window.onload=function(){
var para=document.createElement("p"); //创建一个<p></p>的元素节点(document.createElement:创建一个元素节点)
var div=document.getElementById("testdiv"); //获取div对象
div.appendChild(para); //在div下添加元素节点 (parent.appendChild:添加节点)
var text=document.createTextNode("Hello JavaScript"); //创建一个文本节点 (document.createTextNode:创建一个文本节点)
para.appendChild(text); //将文本节点添加到元素节点<p>下
//div.getElementsByTagName("p")[0].childNodes[0].nodeValue="dd"; //不是用此方法是因为刚创建的元素节点是不包含文本节点的因此不能改变
}
}
insertBefore()
将标记插入到某个节点的前面，在插入前必须告诉他：
- 新元素：你想插入的元素（newElement）。
- 目标元素：你想把这个新元素插入到哪个元素（targetElement）之前。
- 父元素：目标元素的父元素（parentElement）
调用语法：parentElement.insertBefore(newElemetn,targeElement);
insertAfter()
在javacript中并没有直接提供此函数（在节点的后面插入元素）,但可以自己写一个.
function insertAfter(newElement,targetElement){ //传入两个参数，一个是新元素，另一个是目标元素。
var parent=targetElement.parentNode; //获得目标元素的父节点
if(parent.lastChild==targetElement){ //判断目标元素是不是父节点的最后一个节点元素
parent.appendChild(newElement); //如果是直接在后面插入
}else{
parent.insertBefore(newElement,targetElement.nextSibling); //如果不是则在目标元素的下个元素前面插入节点
}
}
