DOM（一）-16-(节点操作-创建并添加_1)

最新推荐文章于 2024-01-11 07:06:10 发布

wy_0928

最新推荐文章于 2024-01-11 07:06:10 发布

阅读量365

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47809717

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

【示例】演示创建并添加文本节点

<html>
	<head>
		<style type="text/css">
			div{
				border:#0CF 1px solid;
				width:200px;
				padding:30px;
				margin:10px;//外边距
			}
			
			#div_1{
				background-color:#0CF;
			}
			
			#div_2{
				background-color:#FCF;
			}
			
			#div_3{
				background-color:#C0F;
			}
			
			#div_4{
				background-color:#0F0;
			}
		</style>
	</head>
	
	<body>
		<script type="text/javascript">
		
			//创建并添加节点
			//需求：在div_1节点中添加一个文本节点
			function createAndAdd(){
			
				/*
				 *步骤：
				 *1.创建一个文本节点
				 *2.获取div_1节点
				 *3.将文本节点添加到div_1节点中
				 */
				 
				 //1.创建节点
				 /*
				  *在docuemnt对象中有createTextNode方法：从指定值中创建文本字符串（详见DHTML API）。
				  *其语法：oTextNode = document.createTextNode( [sText])
				  *即传入文本框，返回的是文本节点对象
				  */
				 var oTextNode = document.createTextNode("这是一个新的文本");
				  
				 //2.获取div_1节点
				 var oDivNode = document.getElementById("div_1"); 
				 
				 //3.将文本节点添加到div_1节点中
				 /*
				  *给div添加节点，那么div自己最清楚，在div对象中有如下方法：
				  *appendChild：给对象追加一个子元素，即给其添加一个儿子。
				  */
				 oDivNode.appendChild(oTextNode);
				 			
			}
			
		</script>
		
		<input type="button" value="创建并添加节点" οnclick="createAndAdd()" />
		
		<hr/>
		
		<div id="div_1">
		
		</div>
		<div id="div_2">
		好好学习，day day up!
		</div>
		<div id="div_3">
		div区域演示文字
		</div>
		<div id="div_4">
		节点的增删改查
		</div>
		
	</body>
</html>

【效果】单击button后，在第一个div区域中添加了一个文本节点，其内容是“这是一个新的文本”

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（一）-16-(节点操作-创建并添加_1)

【示例】演示创建并添加文本节点 div{ border:#0CF 1px solid; width:200px; padding:30px; margin:10px;//外边距 } #div_1{ background-color:#0CF; } #div_2{ background
复制链接

扫一扫