、替换页面元素:DOM(文档对象模型),利用DOM可以完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。本题要求单击俺就后完成对文档中父元素div的第二个子元素p替换成新添加的div元素。【10分】 具体要求如下:在页面设置父元素<div>元素和4个子元素<p>。给按钮添加replaceNode ()单击事件。处理replaceNode函数逻辑使用document.getElementById()获得父元素div、和div下的第2个p子元素;使用document.createElement()创建新的<div> 元素节点;使用document.createTextNode()创建文本节点;使用appendChild ()方法将文本节点添加到刚创建的新元素div中;使用replaceChild()方法在父元素中,把第二个p元素替换成新元素div

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div id="box">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    </div>
    <input type="button" value="replace" onclick="replaceNodeFun();" />
    <script type="text/javascript">
    function replaceNodeFun() {
    var box = document.getElementById("box");
    var p = box.getElementsByTagName("p")[1];
    var div = document.createElement("div");
    var text = document.createTextNode("新文本");
    div.appendChild(text);
    box.replaceChild(div,p);
    }
    </script>
    </body>
    </html>