DOM的增删改查

187 阅读1分钟

1:在id名为city的div下添加一个li标签,标签内容为广州。

# 1:创建li元素
var li = document.createElement("li");
# 2:创建文本节点
var guangzhou = document.createTextNode("广州");
# 3:将li元素与文本绑定在一起
li.appendChild(guangzhou);
# 4:获取id为city的节点
var city = document.getElementById("city");
# 5:将组合好的标签添加到city下
city.appendChild(li);

2:在city标签下 li为北京的元素之前,添加一个li元素内容为广州(insertBefore)

# 将广州节点创建好
var li = document.createElement("li");
# 创建文本内容
var guangzhou = document.createTextNode("广州");
# 二者绑定
li.appendChild(guangzhou);

# 获取要插入位置的父节点
var city = document.getElementById("city");
# 获取要插入位置的下一个相邻子节点
var bj = document.getElementById("bj");
# 关键
city.insertBefore(li,bj);

3:替换节点

父节点.replaceChild(新节点,旧节点);

4:删除节点

父节点.removeChild(要删除的节点);
# 常用下面的方式进行删除
要删除的节点.parentNode.removeChild(要删除的节点);