DOM的节点有2个比较常用的Element元素节点和TextNode文本节点。---Document文档节点这里不讨论。
Document对象的createElement()用来创建元素节点,参数是个标签名串。不区分大小写,最好用小写。
这样产生一个节点在内存,但是还没有添加到Dom树中显示出来(这点很像一个显示对象没有被添加到显示列表里一样)
在显示出来之前可以修改一些属性初始化。
1.)如
var elem = document.createElement("p");
var txtPara = document.createTextNode("我是一个段落文本!");
elem.appendChild(txtPara);
document.body.appendChild(elem);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3C DOM 操作1</title>
<style type="text/css">
p
{
border:1px solid #369;
}
</style>
<script type="text/javascript">
function insertPara()
{
var elem = document.createElement("p");
var txtPara = document.createTextNode("我是一个段落文本!");
elem.appendChild(txtPara);
document.body.appendChild(elem);
}
</script>
</head>
<body>
<button onclick="insertPara()">插入段落</button>
</body>
</html>
我们可以使用火狐的firebug插件观察DOM树的变化。
insertBefore(新孩子,参照物节点)
看看下面的代码
//document.body.appendChild(elem);
换成这个
document.body.insertBefore(elem,document.getElementsByTagName('button')[0]); //看这里
方法:replaceChild(新节点,旧节点)
document.body.replaceChild(elem,document.getElementsByTagName('button')[0]);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>W3C DOM 操作1</title>
<style type="text/css">
p
{
border:1px solid #369;
}
</style>
<script type="text/javascript">
function insertImg()
{
var elem = document.createElement("img");
elem.setAttribute("src","1.png");
elem.setAttribute("width","100");
document.body.appendChild(elem); //看这里
}
</script>
</head>
<body>
<button onclick="insertImg()">插入图片</button>
</body>
</html>
结果如下: