【示例】演示创建并添加文本节点
<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区域中添加了一个文本节点,其内容是“这是一个新的文本”