DOM （3）子节点与父节点

1.父节点children

children 返回当前节点的所有元素子节点。返回的是一组nodelist数据

for(var i = 0;i<el.children.length;i++){

console.log(el.chlidren[i])

}

7.png

2.父节点 append（） prepend（）

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

Prepend（）向当前元素最前面添加一个或者多个子节点

Var p = document.createElement(‘p’)

Document.body.append(“hello”,p)

8.png

3.子节点 befor（） after（）（同一级）

before（）向当前节点前面添加一个或者多个节点

after（）向当前节点后面添加一个或者多个节点

var p =document.createElement(‘p’)

var p1 = document.createElement(‘p1’)

  el.before(p)//插入元素节点

el.before(‘hello’)//插入文本节点

el.before(p,p1)//插入多个元素节点

4.子节点replaceWith
replaceWith（）替换当前节点

    var span = document.createElement(‘span’)
    el.replaceWith(span)