js的增改删

insertBefore插入元素
语法:父元素.insertBefore(参数1，参数2)
参数1:需要插入新的元素
参数2:插入到哪个元素的前面
1.创建新的元素
2.原本存在的元素
3.需要插入的元素
获取元素
var ul = document.getElementById("ul");
var .li2 = document.getElementById("li2");
创建一个新元素，直接将新元素插入到指定的位置
var newLi = document.createElement("li");
newLi.innerText = "我是新的";
ul.insertBefore(newLi,li2);
原本存在的元素移动到指定的位置
var li4 = document.getElementById("li4");
ul.insertBefore(li2,li4);
需要插入的元素有子元素，元素及其子元素一起移动到指定的位置
var ul1 = document.getElementById("ul1");
ul1.insertBefore(ul1,li2);

replaceChild替换元素
语法:父元素.replaceChild(参数1，参数2)
参数1:需要替换的新元素
参数2:要被替换的元素
1.创建新的元素
2.原本存在的元素
3.需要插入的子元素
获取元素
var ul = document.getElementById("ul");
var li2 = document.getElementById("li2");
创建一个新元素，直接替换
var newLi = document.createElement("li");
newLi.innerText = "我是新的";
ul.replaceChild(newLi,li2);
原本存在的元素 替换掉原来的元素
var li4 = document.getElementById("li4");
ul.replaceChild(li4,li2);
需要插入的元素有子元素，元素及其子元素一起移动替换掉本来的元素
var ul2 = document.getElementById("ul2");
ul.replaceChild(ul2,li2);

 

removeChild移出元素
语法:父元素.removeChild(子元素)
获取元素
var ul = document.getElementById("ul");
var li2 = document.getElementById("li2");
元素不能调用该方法移除自己(不能自杀)
//li2.removeChild(li2);
父元素不能移除其它元素的子元素
ul.removeChild(li2);
父元素只能移除自己的子元素
ul.removeChild(li2);