有時為了動態生成頁面內容, 我們會用到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>