版权声明：本文为博主原创文章，转载请注明出处。 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=)