有时为了动态生成页面内容, 我们会用到javascript来这么处理, 但有时用javascript动态生成页面信息时,会有错误却查不到信息,现以用javascript动态生成表格为例, 说明如下(以下代码可以直接拷贝下来,存为html格式的文件执行):
<html>
<head>
<script language='javascript'>
function addNode() {
// 第一部分代码
var vDiv = document.getElementById('1'); // 注意:此处是取的不包含在<table>内的<div>标签
var vTable = document.createElement('table');
var tbody = document.createElement("tbody");
var vTr = document.createElement('tr');
var vTd = document.createElement('td');
var vText = document.createTextNode('这是第一部分代码');
vTd.appendChild(vText); // 或: vTd.innerText='这是第一部分代码';
vTr.appendChild(vTd);
tbody.appendChild(vTr);
vTable.appendChild(tbody);
vDiv.appendChild(vTable);
// 第二部分代码
/*
var vDiv = document.getElementById('2'); // 注意:此处是取的<table>标签
//var obj = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText = "这是第二部分代码";
tr.appendChild(td);
tbody.appendChild(tr);
//obj.appendChild(tbody);
vDiv.appendChild(tbody); // 注意: 此处vDiv即为<table>标签, 故只需要在这个标签上添加<tbody>标签
// 同样，如果本段代码取<tbody>标签，
// 即：var vDiv = document.getElementById('4');
// 那么，我们只需用vDiv.appendChild(tr);即可实现同样的效果。
*/
/*
// 第三部分代码
var vDiv = document.getElementById('8'); // 注意:此处是取的包含在<tbody>标签(id为6)内的<div>标签
//var obj = document.createElement("table");
//var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerText="这是第三部分代码";
tr.appendChild(td);
//tbody.appendChild(tr);
//obj.appendChild(tbody);
vDiv.appendChild(tr); // 通过此处，向id为8的<div>添加标签<tr>是错误的；因为，<div>与<tr>不是父子关系
// 这是错误的代码： vDiv.innerHtml="<table><tr><td>test</td></tr></table>";
*/
}
</script>
</head>
<body>
<!-- 总结: 动态生成页面表格 -->
<!-- 1: 在页面中本身就没有<table>标签时, 必须创建<table>、<tbody>、<tr>、<td>这四个标签,并且缺一不可; -->
<!-- 参见：“第一部分代码” -->
<!-- 2: 在页面中本身存在<table>标签时, 依据上边四个标签必须有的原则：在页面中有的标签我们直接取 -->
<!-- 最内层的标签, 然后把缺的标签补上即可;参见：“第二部分代码” -->
<!-- 3: 对于没有父子关系的标签，如ID为8的标签（即：div标签）与tr标签就没有父子关系。-->
<!-- 此时，就不能直接添加tbody标签到div标签内部. 参见：“第三部分代码”。-->
<!-- 此处仅有div标签 -->
<div id='1'>
</div>
<!-- 此处仅有table标签 -->
<table id='2'>
</table>
<!-- 此处有table、tbody二种标签 -->
<table id='3'>
<tbody id='4'>
</tbody>
</table>
<table id='5'>
<tbody id='6'>
<tr id=7>
</tr>
<div id='8'>
</div>
</tbody>
</table>
</body>
<html>
<script language='javascript'>
addNode();
</script>