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

最新推荐文章于 2022-08-11 20:31:21 发布

wy_0928

最新推荐文章于 2022-08-11 20:31:21 发布

阅读量280

点赞数

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

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

版权

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

42 篇文章 0 订阅

订阅专栏

【示例】在div_1中创建并添加一个按钮节点

<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">
		
			function createAndAdd(){
			
				//1.创建一个按钮节点
				/*
				 *用document对象中的createElement方法，为指定标签创建一个元素的实例。（详见DHTML API）
				 */
				
				var oButtonNode = document.createElement("input");
				
				//由于input里面有好多类型，如<input type="button" value="..." />以及<input type="text" value="" />等等,
				//所以这里需要明确其类型，如下所示：
				
				oButtonNode.type = "button";
				oButtonNode.value = "一个新按钮";//value是button的属性，相当于<input type="button" value="..." />中的value
				
				//2.获取div_1节点
				var oDivNode = document.getElementById("div_1");
				
				//3.将按钮节点添加到div_1节点中
				oDivNode.appendChild(oButtonNode);
				
				//=================================================================================
				//如下方法也可以实现在div_1节点中添加按钮节点，用的是属性innerHTML，即通过该属性设置超文本
				var oDivNode2 = document.getElementById("div_1");
				oDivNode2.innerHTML = "<input type='button' value='一个按钮' />";//【注意】这里必须外部双引号，内部单引号
				//在div_1节点中也可以添加超链接节点
				oDivNode2.innerHTML = "<a href='http://www.baidu.com'>百度主页</a>";//【注意】这里必须外部双引号，内部单引号


/*
 *以上两方法的区别：前者不断单击"创建并添加节点"button会不断出现新添加的节点，因为这个只要加进去即可；而后者不断单击
 *"创建并添加节点"button始终只呈现一个节点，因为不断进行覆盖操作。
 */			
			}
		
		</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>

wy_0928

关注

0
点赞
踩
0

收藏

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

【示例】在div_1中创建并添加一个按钮节点 div{ border:#0CF 1px solid; width:200px; padding:30px; margin:10px; } #div_1{ background-color:#0CF; } #div_2{ background-color
复制链接

扫一扫