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

来源：互联网发布：java写的小游戏编辑：程序博客网时间：2024/06/10 16:36
【示例】在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="创建并添加节点" onclick="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>
0 0