js DOM(2)

节点的方法

appendChild() 用来插入节点
例:document.body.appendChild(p);

hasChildNodes()用来判断一个节点是否有子节点
该方法返回一个布尔值。表示当前节点是否有子节点。

cloneNode() 用来克隆一个节点
该方法可以传入一个布尔值。值为true,表示复制指定元素的子节点。默认不复制子节点。
复制的元素不包括添加在该元素上的事件。要用appendChild把复制的节点,添加到文档中去。
例:var newDiv=document.getElmentsByClassName(“div”)[0].cloneNode(true)
document.body.appendChild(newDiv)

insertBefore() 用来将一个节点插入到指定位置
insertBefore()要传入两个值。第一个值为要添加的节点。第二个值为讲新节点插入到此值的前面。
如果第二个值为null,就会插入到当前元素的最后

removeChild() 表示从父元素中移除该子节点。
var div1= document.getElementById('div');
div1.parentNode.removeChild(div1);

replaceChild() 表示替换当前节点的某一个子节点
replaceChild() 传入两个值。第一个值是新节点。第二个值是要替换的节点。

父节点:
append 向当前元素最后添加一个或多个子节点
prepend 向当前元素最前面添加一个或多个子节点
例:var p = document.createElement('p');
document.body.append('Hello', p);

子节点:
before() 向当前节点前面添加一个或多个节点。
after() 向当前节点后面添加一个或多个节点。
例:var p = document.createElement('p');
var p1 = document.createElement('p');
el.before(p);// 插入元素节点
el.before('Hello');// 插入文本节点
el.before(p, p1);// 插入多个元素节点

replaceWith()
replaceWith() 替换当前节点。
var span = document.createElement('span');
el.replaceWith(span);

你可能感兴趣的:(js DOM(2))