DOM-动态操作心得

这个知识点都是之前看过的,就当是复习了

一、创建元素的三种方法

　　第一种:  document.write()

• • 识别标签
  • 但会覆盖之前内容

　　第二种:  用元素自身的innerHTML方法

• • 不识别标签
  • 但可以不覆盖之前内容

    ul.innerHTML += "<li></li>";

     

　　第三种:利用DOM自身api创建元素

• • 先var newLi = document.createElement("li")　　***()内传入的参数只写标签名字即可,不要写格式<li></li>***
  • newLi.innerHTML = "我是document.createElement方法创建的";
  • ul.appendChild(newLi);　　//添加到ul中  ***appendChild()是在父元素的最后面添加新创建的元素***
  • 还可以用ul.innerinsertBefore(newLi,2);　　//***insertBefore()方法的第二个参数是获取到的指定节点,在该节点之前添加新创建的元素***

二、删除和替换

1. 删除 removeChild()     //直接传入要删除的子元素
2. 替换 replaceChild()    //父元素调用,第一个参数是新元素.第二个参数是要被替换的元素

ul.replaceChild(li3,li2);

替换方法,很少用,完全可以用删除再添加替代

三、克隆

• node.cloneNode();     //被复制的节点来调用,参数是true时,深层复制,包括里边包含的其他子元素;参数是false,浅复制,只复制该元素本身