<html>
<head>
<title> js dom getElementById实例教程</title>
</head>
<body>
<span id="span1">hello,ajax!</span>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
var span1=document.getElementById("span1");
//使用innerHTML属性改变结点的内容
span1.innerHTML="innerHtml changed";
//-->
</script>
上面是个简单的实例下面来看看dom对表格的操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>
</head>
<body>
<div id="tableTest">
</div>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//获取容器div的引用
var container=document.getElementById("tableTest");
//创建表格对象
var _table=document.createElement("table");
//设置表格属性
_table.setAttribute("border","1");
_table.setAttribute("borderColor","black");
_table.setAttribute("width","200");
//创建5行
for(var i=0;i<5;i++){
var _tr=document.createElement("tr");
//创建4列
for(var j=0;j<4;j++){
var _td=document.createElement("td");
var _tn=document.createTextNode(i.toString()+j.toString());
_td.appendChild(_tn);
_tr.appendChild(_td);
}
_table.appendChild(_tr);
}
//将表格显示于页面
container.appendChild(_table);
//-->
</script>