dom动态修改html页面

    我们可以利用dom动态修改html页面内容,下面是一个小范例。

   javascript代码:

function c()
{
  var p5 = document.createElement("p");
  var textNode = document.createTextNode("我是段落5,后来被插入的");
  p5.appendChild(textNode);

  var p3 = document.getElementById("p3");
  var body = document.body;
  body.insertBefore(p5,p3);
}


html页面:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		 
		 <script type="text/javascript" src="js/dom.js">
		 	
		 </script>
	</head>
	<body>
       <p id="p1">  我是段落一   </p>
       <p id="p2">  我是段落二  </p>
       <p id="p3">  我是段落三   </p>
       <p id="p4">  我是段落四 </p>
       <script type="text/javascript">
       	   c();
       	
       </script>
	</body>
</html>


 

你可能感兴趣的:(JavaScript,html,c,function)