DOM操作HTML文档

<script language="javascript" type="text/javascript">
function insertStr()
{
//获取文本框中输入的值
var name = document.getElementById("str").value;
//新建一个TextNode节点
var test = document.createTextNode(name);
//新建一个td类型的Element节点
var td = document.createElement("td");
//新建一个tr类型的Element节点
var tr = document.createElement("tr");
tr.setAttribute("id",name);
td.appendChild(test); //将节点text加入td中
tr.appendChild(td); //将节点td加入tr中
//创建元素删除按钮
var deleteButton = document.createElement("input");
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function (){ deleteSort(name); };
var td = document.createElement("td");
td.appendChild(deleteButton);
tr.appendChild(td);
//添加deleteButton元素
document.getElementById("sortList").appendChild(tr);
}

// 删除成员函数
function deleteSort(id) {
if (id!=null){
var obj=document.getElementById(id);
var sortList= document.getElementById("sortList");
sortList.removeChild(obj);
}
}
</script>

html代码

<form name="form1" method="post" action="#">
<input name="str" type="text" id="str" value="" />
<input name="insert" type="button" id="insert" value="留言" onclick="insertStr()"/>
</form>
<h3>所有留言：</h3>
<table width="100" border="1" cellspacing="0" cellpadding="0" id="table1">
<tbody id="sortList">
</tbody>
</table>