<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DOM文档对象</title>
<meta charset="utf-8" />
</head>
<body>
<div id="div1"> </div>
<script>
//这是利用Js来查询标签（元素节点）里的内容
var div = document.getElementById("div1");//当前节点
var newh1 = document.createElement("h1");//创建元素节点
var newtext = document.createTextNode("HelloWold");//创建文本节点
newh1.appendChild(newtext);//将文本节点添加到新建的元素节点中
div1.appendChild(newh1);//将新建的元素节点添加到<div>中
</script>
<p id="p2"></p>
<script>
var newp = document.createElement("p");//创建节点
var newtext = document.createTextNode("这是一句话")//在节点里面写内容
newp.appendChild(newtext);//把节点内容放到创建节点里面
var mydiv = document.getElementById("div1");//获取父节点
var p = document.getElementById("p2");//指定插入位置节点
mydiv.insertBefore(newp, p);//将新建节点放置在段落p前边
</script>
<script>
var newh1 = document.createElement("h1");//创建节点
var newtext = document.createTextNode("标题1");//创建文本节点
newh1.appendChild(newtext);//将文本节点newtext添加到newh1节点中
var mydiv = document.getElementById("div1");//获取父节点
var para = document.getElementById("p1");//指定要替换的子节点
mydiv.replaceChild(newh1, para);//替换子节点
</script>
<script>
var mydiv = document.getElementById("div1");//获取父节点
var para1 = document.getElementById("p1");//指定要删除的子节点
mydiv.removeChild(para1);//删除子节点
</script>
</body>
</html>
