版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/54893521
建立新的HTML元素
例如，如果想要在div中建立一個段落p那麼需要分成以下幾步完成：
1，建立新的<p>元素。createElement(“節點名”)：
var para = document.createElement(“p”);
2，建立p元素中的文本，文本為一個文本節點。createTextNode(“文本”)：
var text_node = document.createTextNode(“這是一個追加的段落”);
3，将文本節點追加到p元素後。追加用 父節點.appendChild(子節點):
para.appendChild(text_node);
4，找到容納p節點的父節點
var element = document.getElementById(“s”);
5，将p節點追加到父節點後:
element.appendChild(para);
完整代碼如下：
<html>
<head>
</head>
<body>
<div id="s">
<p>這是一個普通段落</p>
<p>在下面追加一個段落</p>
</div>
<script>
//建立一個節點
var para = document.createElement("p");
//建立文本節點
var text_node = document.createTextNode("這是一個追加的段落");
//将文本節點追加到p節點後
para.appendChild(text_node);
//将處理好的段落标記追加到網頁中的已知節點
var element = document.getElementById("s");
element.appendChild(para);
</script>
</body>
</html> 删除已有的 HTML 元素
删除元素分為以下幾步
1. 找到待删除的元素
2. 找到待删除元素的父元素
3. 删除元素。父節點.removeChild(子節點)
也可以用parentNode擷取一個元素的父元素：
child.parentNode.removeChild(child);
<html>
<body>
<div id="div1">
<p>這是一個普通的段落</p>
<p>删除下面的段落</p>
<p id="delete">該段落應該被删除</p>
</div>
<script>
var pare = document.getElementById("div1");
var child = document.getElementById("delete");
pare.removeChild(child);
</script>
</body>
</html>
![DOM（一）——HTML DOM[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)