Dom编程——增删元素

先介绍几个api
1.document.createElement("标签名")
2.document.getElementById(创建出来的Element) // 默认放在最后
3.父元素.insertBefore(新element, 获取的参照element) // 在某个子元素前面插入
4.父元素.replaceChild(新element,获取的被替换的element) // 注意这是child，children是把所有的清空，留下的全是新的
5.document.getElementById("待删除元素的id").remove() // 我们之前的都是父节点调用添加修改子元素，而remove直接是删除自己的元素本身

// 重复添加没解决id重复的问题。。。

北京
上海
广州
深圳

增加元素的js代码如下、替换、删除的js代码就不贴了，可以看js源码


function add() {
 
    var city = document.createElement("li")
 
    city.id = "hz"
 
    city.innerText = "杭州"
 
    var citys = document.getElementById("citys")
 
    citys.appendChild(city)

}
            
function addTJ() {
 
    var tj = document.createElement("li")
 
    tj.innerText = "天津"
 
    tj.id = "tj"
 
    var citys = document.getElementById("citys")
 
    citys.insertBefore(tj, document.getElementById("sh"))

}