DOM 

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

 

posted @ 2018-01-08 08:47  你的斗志并没有失去  阅读(166)  评论(0)    收藏  举报