、替换页面元素: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
<!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>