vue.js 删除指定元素_DOM Node 的建立、删除与修改

在之前的介绍中，我们已经理解了DOM Node的类型、以及节点之间的查找与关系。那么在今天的介绍里我们将继续来说明，如何通过DOM API来建立新的节点、修改以及删除节点。

DOM 节点的新增

• document.createElement(tagName)

通过document.createElement()可以建立一个新的元素：

var newDiv = document.createElement('div');

在建立新的div元素newDiv后，这时候我们在浏览器上还看不到它，直到通过appendChild()、insertBefore()或replaceChild()等方法将新元素加入至指定的位置之后才会显示。

新建立的newDiv我们也可以同时对它指定属性，如：

newDiv.id = "myNewDiv"; 
newDiv.className = "box";

• document.createTextNode()

之前曾介绍过，除了HTML元素节点外，还有文字节点，那么document.createTextNode()就是用来建立文字节点的方法。

用法很简单，直接在document.createTextNode()加入字符串即可。跟createElement一样的是，新增的TextNode在被加入至某个节点前，我们是看不到它的。

var newDiv = document.createElement('div');

// 建立 textNode 文字节点
var textNode = document.createTextNode("Hello world!");

// 通过 newDiv.appendChild 将 textNode 加入至 newDiv 
newDiv.appendChild(textNode);

• document.createDocumentFragment()

在DOM规范的所有节点之中，DocumentFragment算是最特殊的一种，它是一种没有父层节点的最小化文件对象。可以把它看作是一个轻量化的Do