JS新增、删除节点

<div id="box"></div>

新增节点
在div中新增一个p

// 创建 p 标签节点
var node = document.createElement("p")
// 创建 文本节点 ( 注意文本节点和 innerHTML 的区别 )
var content = document.createTextNode("段落文本")
//将文本节点添加到 p 标签下
node.appendChild(content)
//获取 div
var box = document.getElementById("box")
//将 p 标签添加到 div 下
box.appendChild(node)

结果：

<div id="box">
	<p>段落文本</p>
</div>

删除节点

//获取到要删除的元素	p
let del_node = document.getElementsByTagName("p")[0]
//从它的父元素把这个子元素删除掉
del_node.parentNode.removeChild(del_node)

JS删除元素必须知道这个元素的父元素是谁，有两种方法：

1. 获取到要删除元素的父元素
2. 通过上面的，子元素.parentNode ，来代表其父元素