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="留言" οnclick="insertStr()"/>

</form>

<h3>所有留言：</h3>

<table width="100" border="1" cellspacing="0" cellpadding="0" id="table1">

<tbody id="sortList">

</tbody>

</table>