JS案例:替换元素节点示例

来自CloudWiki
跳转至: 导航搜索
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>替换页面元素示例</title>
<script type="text/javascript">
		function replaceNode(){
		//获得父元素div
		var parNode=document.getElementById("div1");
		//获得div第1个p子元素
		var firstP=document.getElementById("p1");
		var newDiv=document.createElement("div");
		var newText=document.createTextNode("JavaScript实训课");
		newDiv.appendChild(newText);
		parNode.replaceChild(newDiv,firstP);
	}
</script>
</head>
<body>
<div id="div1">
	<p id="p1">本学期开的第1门专业课程是Java</p>
	<p id="p2">本学期开的第2门专业课程是JavaScript</p>
	<p id="p3">本学期开的第3门专业课程是jQuery</p>
	<p id="p4">本学期开的第4门专业课程是JavaWeb</p>
</div>
    <form action="" method="get">
    <input type="button" value="将第1行内容替换为JavaSctipt实训课" onClick="replaceNode()"/>
    </form>
</body>
</html>