JavaScript DOM基础：增加，删除元素

添加元素

• Document.createElement() ：创建元素

语法：

let element = document.createElement(tagName[, options])

• Document.createTextNode() ：创建一个新的文本节点

语法：

var text = document.createTextNode(data)

• Document.createAttribute() ：创建并返回一个新的属性节点

语法：

attribute = document.createAttribute(name)

• Document.createComment() ：创建并返回一个注释节点

语法：

var commentNode = document.createComment(data)

• Document.createDocumentFragment() ：创建一个新的空的文档片段

语法：

var docFragment = document.createDocumentFragment()

• Node.appendChild()：将一个节点添加到指定父节点的子节点列表末尾

语法：

var child = node.appendChild(child)

• Element.classList.add()：添加指定的类值class

语法：

  elementNodeReference.classList.add( String [, String] )

• Document.write()，Document.writeIn()：将文本字符串写入打开的文档流

语法：

document.write(markup)
document.writeIn(line)

• document.write()和writeIn()的区别是前者没有换行，而后者有换行。

---

删除元素：

• Element.removeAttribute()：从元素中删除指定的属性

语法：

element.removeAttribute(attrName)

• Element.removeChild(）：删除子元素

语法：

var oldChild = node.removeChild(child);
OR
element.removeChild(child);

• ChildNode.remove() ：删除元素

语法：

elementNodeReference.remove()

• Child.parentNode.removeChild(child)：不确定父元素时可这样删除子元素

示例：

if (node.parentNode) {
//判断node是否在DOM树中
    node.parentNode.removeChild(node);
}

• Element.classList.remove() ：移除元素中一个或多个类名

语法：

elementNodeReference.classList.remove( String [,String] )