<!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>