JS
<script>
function addNode(){
var box = document.getElementById("box")
var p = document.createElement("p")//新建一个p元素
var txt = document.createTextNode("段落三")
p.appendChild(txt)//将文字添加到段落中
box.appendChild(p)//在div中添加一个p元素节点
}
function inserNode(){//插入一个节点,在当前元素的前面
var box = document.getElementById("box")
var h2 =document.createElement("h2")//创建一个二级标题元素
var txt = document.createTextNode("段落标题")
h2.appendChild(txt)//将文字放在标题元素中
var p = document.getElementsByTagName("p")[0]
box.insertBefore(h2,p)//将h2标题插入到段落一的前面
}
function updateNode(){//修改节点,将旧的节点换成新的
var box = document.getElementById("box")
var p = document.getElementsByTagName("p")[1]//获得第二个段落元素
var old = p.firstChild//获取第二个段落元素的文本
var newtxt = document.createTextNode("新段落二")
p.replaceChild(newtxt,old)//将Ⅸ=旧文本替换成新的
}
function deleteNode(){
var box = document.getElementById("box")
var p =document.getElementsByTagName("p")[0]
box.removeChild(p)//将段落一删除
}
</script>
HTML
<div id="box">
<p>段落1</p>
<p>段落2</p>
</div>
<a href="javascript:addNode()">添加节点</a>
<a href="javascript:inserNode()">插入节点</a>
<a href="javascript:updateNode()">修改节点</a>
<a href="javascript:deleteNode()">删除节点</a>