JS动态生成元素和删除元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

 

<body onload="ap()">

<script type="text/javascript">

function ap(){

var div= document.getElementById("divContent");

 

    var table=document.createElement("table");

table.align="center";

table.border="1";

table.setAttribute("width","500");

table.height="100";

//document.body.appendChild(table);

div.appendChild(table);

 

var tr1= document.createElement("tr");

var td1=document.createElement("td");

td1.width="250";

var td2=document.createElement("td");

td2.width="250";

 

tr1.appendChild(td1);

tr1.appendChild(td2);

table.appendChild(tr1);

 

var input=document.createElement("input");

input.type="text";

input.size="20";

input.value="张三";

 

var text=document.createTextNode("姓名");

td1.appendChild(text);

td1.appendChild(input);

 

 

}

function del(){

/**

var div=document.getElementById("deleteElement");

document.body.removeChild(div);

*/

var table=document.getElementById("tb");

if(table!=null){

 

var parent= table.parentNode;

parent.removeChild(table);

}

 

}

    </script>

    <div id="divContent" style="border:1px solid red; width:700px;">

    

    </div><br /><br />

    <div id="deleteElement" style="border:1px solid red; width:700px;">

    <table id="tb" border="2">

        <tr>

<td>要删除的表格</td>

</tr>

        </table>

    </div>

<br /><br />

    <input  type="button" value="删除DIV中的表格" onclick="del()"/>

</body>

</html>

 
posted @ 2011-09-11 08:19  沉默不语  阅读(332)  评论(0)    收藏  举报