您的位置：首页 > 其它

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

2015-08-20 16:30 176 查看

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

<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="创建并添加节点" 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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航