dom创建table的一个方法

最新推荐文章于 2022-03-31 11:11:12 发布

转载最新推荐文章于 2022-03-31 11:11:12 发布 · 1.5k 阅读

文章标签：

#table #reference #javascript #border #html #测试

DOM 专栏收录该内容

8 篇文章

订阅专栏

本文通过一个具体实例介绍了如何使用JavaScript的document.createElement方法创建DOM元素，并演示了如何将新创建的元素添加到现有DOM树的不同位置。提供了appendChild、insertBefore 和 insertAdjacentElement等方法的具体应用案例。

　　document.createElement("table")只是创建了一个对象，如果要把它添加到document中，还需要另外的方法（appendChild、insertAdjacentElement、insertBefore）

例子：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>

<body>
<table id="tab1" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td> </td></tr>
</table>

<script language="JavaScript">
alert(document.documentElement.innerHTML) //查看添加对象以前的源码
oNewTable = document.createElement("table")

//以下三种方法任选一种测试，注释掉其余两种
document.body.appendChild(oNewTable) //增加成为body的最后一个子元素
document.body.insertBefore(oNewTable, tab1) //增加成为body的子元素，位于tab1的前面
tab1.insertAdjacentElement("beforeBegin", oNewTable) //插入到tab1的前面(tab1是上面那表格对象的ID)
//beforeBegin还可以换成"afterBegin", "beforeEnd" , "afterEnd"
alert(document.documentElement.innerHTML) //查看添加对象以后的源码
//更具体的用法请参考MSDN：http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
</script>
</body>
</html>