js中DOM操作分析部分以及操作的代码

万万没想到2022

于 2019-07-19 20:24:41 发布

阅读量120

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/w2019424/article/details/96498054

本文介绍了一个简单的JavaScript函数，用于在网页上动态添加<p>元素。通过点击按钮触发该函数，可以在指定的div内添加包含文本内容的新段落。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

操作的代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		/*动态添加： <p>文本</p>*/
		function dianwo(){
			var div = document.getElementById("div1");
			//创建元素节点
			var p = document.createElement("p");//<<p></p>
			//创建文本节点
			var textNode = document.createTextNode("textNode");//文本内容
			//将p和文本内容关联起来
			p.appendChild(textNode);//<<p>文本</p>
			//将p添加到目标div中
			div.appendChild(p);
		}
	</script>
</head>
<body>
	<input type="button" value="点我,添加P" onclick="dianwo()" />
	<!--一会动态的往这个Div中添加节点-->
	<div id="div1">
		
	</div>
</body>
</html>

运行结果如图：
在这里插入图片描述当点击一下上图的按钮时，会随即出现一个textNode。