在JavaScript中，創建新節點都是先用document對象中的createElement()和createTextNode()這2種方法創建一個元素節點，然後再通過appendChild()、insertBefore()等方法把新元素節點插入現有的元素節點中去。
語法：
var e = document.createElement("元素名"); //創建元素節點
var t = document.createTextNode("元素內容"); //創建文本節點
e.appendChild(t); //把元素內容插入元素中去
舉例1：創建簡單節點
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("h1");
var txt = document.createTextNode(" 學習網");
e.appendChild(txt); //把元素內容插入元素中去
document.body.appendChild(e);
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
這裡使用document.createElement()方法創建了h1標簽，但是此時h1標簽是沒有內容；然後使用document.createTextNode()方法創建了一個“文本節點”。之後我們只有使用appendChild()方法往h1標簽中插入文本節點，h1標簽才有內容。最後使用“document.body.appendChild(e);”把新創建的節點h1輸入到HTML文檔中去。
上面例子創建的是一個簡單的節點，如果想要創建以下節點該怎麼做呢？
<input id="submit" type="button" value="提交"/>
舉例2：創建復雜節點
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("input");
e.id = "submit";
e.type = "button";
e.value = "提交";
document.body.appendChild(e);
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
我們在“DOM對象節點屬性”這一節知道，在DOM中，每一個元素節點都被看做一個對象，因此我們可以像操作對象的屬性那樣給元素節點的屬性賦值。
上面是創建一個新節點，如果想要創建一個表格這種多節點的，該怎麼辦呢？這時我們可以使用循環語句和數組來實現。給大家一個思考題：如何創建一個3行3列的表格，試著用JavaScript創建節點做一下。