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

本文介绍了一个简单的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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值