DOM提供了丰富的方法来支持对结点的基本操作,即创建、添加、修改和删除结点。
一、创建元素结点
document.createElement('div'); //创建一个div元素
当使用createElement方法创建元素后,元素并没有被立即加入到当前的DOM树中,而是被存放在内存中。只有在使用添加结点的相关方法进行操作,才能真正将元素加入DOM树中。
二、创建文本节点
使用createTextNode方法可以创建一个文本结点,该方法接受一个字符串作为创建的文本结点的文本值。
document.createTextNode('It is a text node');
三、添加结点
Node对象提供了appendChild方法来将程序创建的结点添加到父结点的直属子结点列表的末尾。
node.appendChild(newNode);
现在结合上边介绍的创建和添加结点的方法,来制作一个简单的无刷新留言本程序。当然这不是一个真正的留言本,它没有与后台程序和数据库的数据交互,只是模拟客户端的效果,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>create & add node demo</title>
<style type="text/css">
*{margin:0;padding: 0;}
html{
background-color: #eee;
height: 100%;
}
body{
padding:15px;
font-size: 11px;
width:500px;
background-color: #fff;
height: 100%;
font-family: Tahoma;
border-left: 20px solid #ccc;
}
ul{
list-style: none;
border-top: 1px solid #999;
height: 350px;
overflow-x: auto;
overflow-y: scroll;
}
span{
font-weight: bold;
font-size: 12px;
}
li{
border-bottom: 1px dashed #666;
line-height: 20px;
}
form{
margin-top: 10px;
border-top: 1px solid #999;
}
label{
display: block;
line-height: 20px;
font-weight: bold;
cursor: pointer;
background-color: #999;
color: #fff;
margin:3px 0;
padding-left: 5px;
width: 100%;
}
#txtName, #txtContent{
width: 100%;
font-size: 11px;
}
#btnSubmit{
display: block;
margin-top: 3px;
border:1px solid #666;
padding:2px 5px;
width: 100%;
}
</style>
<script type="text/javascript">
function submitMsg(){
var name = document.getElementById('txtName').value;
var content = document.getElementById('txtContent').value;
var span = document.createElement('span');
var nameText = document.createTextNode(name);
span.appendChild(nameText);
var p = document.createElement('p');
var contentText = document.createTextNode(content);
p.appendChild(contentText);
var li = document.createElement('li');
li.appendChild(span);
li.appendChild(p);
document.getElementById(