JavaScript DOM基础:增加,删除元素

149 阅读1分钟

添加元素

  • 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] )