您的位置：首页 > 其它

dom属性：添加节点、删除节点

2012-02-29 20:21 453 查看

innerHTML 向文本节点中定稿数据（它会替换掉原来的内容）

实现追加：

1）获取原来数据

2）原来的数据+新的内容写入到文本节点中

dom访常见属性：

删除节点：removeChild 删除某个对象的子节点

添加节点：1）创建元素节点 createElement("元素名称"); 创建的是标签

2）创建文本节点 createTextNode("文本的内容"); 创建的是内容

添加节点方法：使用 appendChild 把我们定义好的元素节点或者是文本节点追加到对象的子节点中

向当前元素节点的最后一个子节点之后添加节点（追加节点）

appendChild格式当前节点（父节点）

p.appendChild(text); 新节点（等待追加）

把text追加到p元素节点中

把文本追加到table里面

<!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>

<style>

table{

width:200px;

height:10px;}

</style>

</head>

<script language="javascript" type="text/javascript">

function tian(){

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

table.border="1px";

table.setAttribute("bgcolor","red");

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

var tex=document.getElementsByTagName("input");

for(i=0;i<4;i++){

var text=document.createTextNode(tex[i].value);

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

td.appendChild(text);

tr.appendChild(td);

}

table.appendChild(tr);

document.getElementById("d1").appendChild(table);

}

function shan(){

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

var div=table[0].parentNode;

var sha=div.removeChild(table[table.length-1]);

}

</script>

<body>

<form>

姓名：<input type="text" name="xing" value="姓名"/>

性别:<input type="text" name="bie" value="性别"/>

电话：<input type="text" name="dian"value="电话"/>

邮箱:<input type="text" name="you" value="邮箱"/> <br />

<input type="button" value="添加" onclick="tian()"/>

<input type="button" value="删除" onclick="shan()" />

</form>

<div id="d1">

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航