创建节点
新的标签(元素节点) = document.createElement("标签名");
var a1 = document.createElement("li");
//创建一个li标签
var a2 = document.createElement("abcd");
//创建一个不存在的名为abcd的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
插入节点
appendChild
父节点.appendChild(新的子节点);
- 父节点的最后插入一个新的子节点
insertBefore
父节点.insertBefore(新的子节点,作为参考的子节点)
- 在参考节点前插入一个新的节点
- 如果参考节点为null,那么他将在父节点里面的最后插入一个子节点
补充:
<div class="box11">
<div class="box12">div1</div>
</div>
<div class="box21">
<div class="box22">div2</div>
</div>
<script>
var box11 = document.getElementsByClassName("box11")[0];
var box22 = document.getElementsByClassName("box22")[0];
box11.appendChild(box22);
</script>
上方结构中,子盒子box12是在父亲box11里的,子盒子box22是在父亲box21里面的。
如果调用方法box11.appendChild(box22),最后产生的结果是:box22会跑到box11中
(也就是说,box22不在box21里面了)
删除节点
父节点.removeChild(子节点);
用父节点删除子节点,必须要指定是删除哪个子节点
删除自己:
node1.parentNode.removeChild(node1);
复制节点(克隆节点)
要复制的节点.cloneNode(); //括号里不带参数和带参数false,效果是一样的。
要复制的节点.cloneNode(true);
- 不带参数/带参数false:只复制节点本身,不复制子节点
- 带参数true:既复制节点本身,也复制其所有的子节点