dom动态修改html页面

最新推荐文章于 2023-04-06 14:55:18 发布

shizhan1881

最新推荐文章于 2023-04-06 14:55:18 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： html javascript function c

本文链接：https://blog.csdn.net/linshizhan/article/details/7716477

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

我们可以利用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>