需求:利用DOM操作往DIV块中自动添加文本
使用的DOM操作如下:
(1)createTextNode() 创建文本节点
(2)createElement() 创建元素节点
(3)appendchild(node) 插入新节点
分析:
代码实现:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script >
function init(){
var div=document.getElementById("div1");
//创建元素节点<p></p>
var p=document.createElement("p");
//创建文本节点
var textNode=document.createTextNode("我是内容!")
//将文本内容和P标签进行连接
p.appendChild(textNode);
//将P标签和div块进行连接
div.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="点我添加内容" onclick="init()" />
<div id="div1"></div>
</body>
</html>
内容示例: