子节点与父节点

父节点

children返回当前节点的所有元素子节点。

返回的是一组nodelist数据。

 for（var i=0;i<el.children.length;i++）{
    console.log(el.children[i])
 }

示例：

image.png

image.png

结果：

image.png

父节点 append() prepend()

append向当前元素最后添加一个或多个子节点

prepend 向当前元素最前面添加一个或多个子节点

 var p=document.createElement(“p”)
 document.body.append(“Hello”,“p”)

示例：

image.png

image.png

结果：

image.png

子节点 before() after() （同一级）

before()向当前节点前面添加一个或多个节点。

after()向当前节点后面添加一个或多个节点。

 var p=document.createElement(“p”)
 var p1=document.createElement(“p”)
 el.before(p) //插入元素节点
 el.before(“hello”) //插入文本节点
 el.before(p,p1) //插入多个元素节点

示例：

image.png

子节点 replaceWith()替换当前节点

 var span=document.createElement(“span”)
 el.replaceWith(span)

示例：

image.png

结果：div2被p标签替换掉了