使用文檔對象和createElement(..)方法創建新元素
你可以使用 createElement方法創建新的HTML元素或者其他任何你想要的其他元素。例如，如果你想爲< body >元素添加一個字節點< p >元素，可以使用前例中的myBody添加一個新的元素節點。創建一個節點只需要調用document.createElement(” tagname”)。例如：
myBody.appendChild(myNewPTAGnode);
使用removeChild(..)方法刪除節點
每個節點都可以刪除。下面這行代碼刪除myP（第二個< p >元素）裏包含單詞world的文本節點。
最後你可以把包含單詞world的文本節點myTextNode添加到新創建的< p >元素裏：
修正的對象樹最後像這樣：
動態創建一個表格（回到Sample1.html）
文章的剩餘部分將回到Sample1.html。下圖顯示了例子中創建的表格的對象樹結構。
回顧HTML表格結構
創建元素節點並把它們添加到文檔樹
創建sample1.html裏的表格的基本步驟：
- 獲取body對象（文檔對象的第一項）
- 創建所有的元素
- 最後，按照上圖的表格結構添加每一個字節點下面的源代碼是sample1.html的註釋
start函數的最後有一行新代碼，使用另一個DOM方法setAttribute設置了表格的border屬性。setAttribute方法有兩個參數：屬性名和屬性值。你可以使用setAttribute方法設置任何元素的任何屬性。
<title>實例代碼 - 使用JavaScript和DOM創建HTML表格</title>
<script>
// 獲取body
var mybody = document.getElementsByTagName("body")[0];
// 創建<table>和<tbody>元素
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
//創建所有的單元格
for(var j = 0; j < 2; j++) {
// 創建一個 <tr> 元素
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 2; i++) {
// 創建一個<td> 元素
mycurrent_cell = document.createElement("td");
// 創建一個文本節點
currenttext = document.createTextNode("單元格是第" + j + "行，第" + i + "列");
// 把創建的文本節點添加到<td>元素
mycurrent_cell.appendChild(currenttext);
// 把<td>添加到<tr>行
mycurrent_row.appendChild(mycurrent_cell);
}
// 把<tr>行添加到<tbody>
mytablebody.appendChild(mycurrent_row);
}
// 把 <tbody> 添加到 <table>
mytable.appendChild(mytablebody);
// 把 <table> 添加到 <body>
mybody.appendChild(mytable);
// 把mytable的border屬性設置爲2;
mytable.setAttribute("border","2");
}
</head>
<body onload="start()">
</body>
</html>
使用DOM和CSS處理表格
從表格中獲取一個文本節點
這個例子介紹兩個新的DOM屬性。首先使用childNodes屬性獲取mycel的字節點列表。這個childNodes列表包含所有的字節點，不管 它們的名稱和類型是什麼。像getElementsByTagName方法一樣，它返回一個字節點列表，使用 [ x ] 來獲取想要的字節點項。這個例子將myceltext存儲爲表格第二行第二個單元格的文本節點。最後，它創建一個新的包含myceltext 的data 屬性 的文本節點，並使它成爲< body >元素的子節點，來顯示這個例子的最後結果。
如果你的對象是文本節點，你可以使用data屬性來獲取它的內容
mytable = mybody.getElementsByTagName("table")[0];
mytablebody = mytable.getElementsByTagName("tbody")[0];
myrow = mytablebody.getElementsByTagName("tr")[1];
mycel = myrow.getElementsByTagName("td")[1];
// mycel的字節點列表的第一項
myceltext=mycel.childNodes[0];
// currenttext的內容是myceltext的data
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);
獲取一個屬性值
在sample1的最後有一個單元格使用了mytable對象的setAttribute方法。這個單元格用來設置這個表格的border屬性。使用getAttribute方法來獲取這個屬性：
通過改變style屬性隱藏列
當你使用一個JavaScript變量指向對象，你可以立即設置它的style屬性。下面的代碼是sample1.html的修改，第二列的單元格都被隱藏，第一列的單元格背景改爲紅色。注意style屬性是直接設置的。
<body onload="start()">
</body>
<script>
var mybody =document.getElementsByTagName("body")[0];
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
for(var j = 0; j < 2; j++) {
mycurrent_row=document.createElement("tr");
for(var i = 0; i < 2; i++) {
mycurrent_cell = document.createElement("td");
currenttext = document.createTextNode("單元格是:" + i + j);
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
// 如果在第0列設置單元格背景色
// 如果在第1列隱藏單元格
if (i == 0) {
mycurrent_cell.style.background = "rgb(255,0,0)";
} else {
mycurrent_cell.style.display = "none";
}
}
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
}
</html>