创建元素

创建元素语句并对元素属性进行赋值：

1
2
3
4
let div = document.createElement("div") // 任意其他tag也可以

div.className = "alert alert-success";
div.innerHTML = "<strong>Hi there!</strong> You've read an important message."

元素被创建出来之后，还没有被插入到页面中去。

插入方法

基本的插入方法有：

  • parentElem.appendChild(node)，在parentElem内的末尾添加一个node节点
  • parentElem.insertBefore(node, nextSibling)，在parentElem的nextsibling子节点前插入node节点
  • parentElem.replaceChild(node, oldChild)，用node替换oldChild节点

更加灵活的插入方式有：

  • node.append(…nodes or strings)
  • node.prepend(…nodes or strings)
  • node.before(…nodes or strings)
  • node.after(…nodes or strings)
  • node.replaceWith(…nodes or strings)

插入方法

还有一种功能很强大的插入方法：elem.insertAdjacentHTML(where, html)。where是决定html被插入到何处的参数。

  • “beforebegin” – 在elem节点之前插入
  • “afterbegin” – 在elem节点内部的起始插入
  • “beforeend” – 在elem节点内部的末尾插入
  • “afterend” – 在elem节点之后插入

elem.insertAdjacentHTML(where,html)

类似的，还有elem.insertAdjacentText(where,text)和elem.insertAdjacentElement(where,element)，分别是插入文本和元素。其实最常用的还是inserAdjacentHTML，因为当需要插入文本或者元素的时候，有append/prepend/before/after这种更简洁的方法。

拷贝方法

  • elem.cloneNode(true)，元素的深拷贝（包括子元素）
  • elem.cloneNode(false)，不包括子元素

移除方法

从DOM中移除一个节点：

  • parentElem.removeChild(node)
  • node.remove()

需要注意的是，如果我们需要把一个元素从原位置移动到另外一个位置，直接调用相应的插入方法即可，不需要先移除再插入，因为插入方法里面默认是先进行移除的。

另外，有一个很原始的方法：document.write(),这个方法只在浏览器首次加载html，构造DOM树的时候运行，并不能起到修改DOM的功能。