DOM增删改的方法
document.createElement( ); — 可以用于创建一个元素节点对象,它需要一个标签名作为参数,将会根据标签名创建元素节点对象,并将创建好的对象作为返回值返回。
document.createTextNode( ); — 可以创建一个文本节点对象,需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回。
appenChild( ); — 向一个父节点中添加一个新的子节点;语法: 父节点.appendChild(子节点);
//创建一个回调函数,这样每次绑定button和函数时可以直接调用
function myClick(idStr,fun){
var btn = document.getElmentById(idStr);
idStr.onclick = fun;
};
//点击btn01,将名为广州的子节点添加到#city下
//找到btn01
myClick("btn01", function(){
//创建广州节点
//创建<li>
var li = document.creatElement("li");
//创建文本节点广州
var gzText = document.creatTextNode("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);
//找到id为city的节点
var city = document.getElemntById("city");
city.appendChild(li);
});
insertBefore( ); — 在指定的子节点前插入新的子节点;语法:父节点.insertBefore(要插入的子节点,在谁前面插入 );
//将广州的节点插入到#bj前面
my Click("btn02",function(){
//创建li节点
var li2 = document.creatElement("li");
//创建广州的文本节点
var gzText = document.creatTextNode("广州");
//将文本节点设置为li的子节点
li2.appendChild(gzText);
//找到bj
var bj = document.getElementById("bj");
//将广州插入到bj前面
//找到广州和北京的父节点
var city = document.getElemeentById("city");
//插入广州
city.insertBefore(li, bj);
});
replaceChild( ); — 替换子节点;语法:父节点.replaceChild( 新节点,旧节点);
//用广州替换北京
city.replaceChild(li, bj);
removeChild( ); — 删除子节点;语法:父节点.removeChild( 子节点);
//删除北京
city.removeChild(bj);
如果不知道bj的父元素是谁,可以使用parentNode来获取到它的父元素;语法:子节点.parentNode来获取父元素(更常用)
bj.parentNode.removeChild(bj);
//bj.parentNode相当于city
标签.innerHTML — 获取标签内部的html代码,或者增加、修改
console.log(city.innerHTML);
//设置bj内的html代码
var bj = document.getElementById("bj");
bj.innerHTML = "朝阳";
//增加广州的子节点
city.innerHTML += "<li>广州</li>";
//相当于重新全部添加了一遍,因为使用innerHTML会覆盖掉原有代码
推荐写法:
var li = document.createElement("li");
li.innerHTML = "广州"; //可以替代textnode
city.appendChild(li);
练习— 添加、删除记录 (文件)