html dom增删改查的功能,JavaScript笔记——DOM增删改查节点
文章目录
一、增删改查方法
1.1创建节点(增加)
创建元素节点对象
document.createElement()
标签名作参数，并将对象返回
创建文本节点对象
document.createTextNode()
文本内容作参数,根据内容创建文本节点
举例：
//创建li元素对象
var li = document.createElement("li");
//创建广州文本节点
var gzTevxt=document.createTextNode("广州");
1.2向父节点添加子节点
appendChild()
语法:父节点.appendChild(子节点);
对于文本节点:父节点.innerHTML=“内容”;
举例
//将广州文本节点设置为li的字节点
li.appendChild(gztext)；
//效果:
广州1.3替换节点
replaceChild()
语法:父节点.replaceChild(新节点,旧节点)
//获取北京节点
var bj = document.getElementById("bj");
//获取city父节点
var city = document.getElementById("city");
//广州替换北京节点
city.replaceChild(li,bj);
1.4删除节点
removeChild()
父节点.removeChild(子节点)
或者
子节点.parentNode.removeChild(子节点)
//父节点删除子节点
city.removeChild(bj);
//自己删除自己
bj.parentNode.removeChild(bj);
1.5总结
创建节点为document调用
其余方法为父节点调用
二、练习
2.1题目
2.2代码
window.οnlοad=function(){
// 创建一个"广州节点",添加到#city下
myClick("btn01",function(){
//创建广州节点
广州//创建li元素节点
/**
* document.createElement()
* - 可以用于创建一个元素节点对象
* - 它需要一个标签名作为参数,将会根据该标签名创建节点对象
* - 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建广州文本节点
/**
* document.createTextNode()
* - 创建一个文本节点对象
* - 需要一个文本内容作为参数，根据内容创建文本节点
* - 将新的节点返回
*/
var gzText=document.createTextNode("广州");
//将gzText设置li的子节点
/**
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法:父节点.appendChild(子节点);
*
*/
li.appendChild(gzText);
//获取id为city的节点
var city =document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
// 将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建一个广州节点
var li =document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取北京节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/**
* insertBefore()
* - 可以在指定子节点插入新的字节点
* - 语法:父节点.insertBefore(新子节点,旧子节点)
*/
city.insertBefore(li,bj)
})
// 将"广州"节点替换#bj节点
myClick("btn03",function(){
//创建一个广州节点
var li =document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取北京节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/**
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法:父节点.replaceChild(新节点,旧节点);
*
*/
city.replaceChild(li,bj);
})
// 删除#bj节点
myClick("btn04",function(){
//获取北京的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/**
* removeChild()
* - 可以删除一个子节点
* - 语法:父节点.removeChild(子节点);
*
* 子节点.parentNode.removeChild(子节点)
*/
//city.removeChild(bj);
bj.parentNode.removeChild(bj);
})
// 读取#city内的HTML代码
// 设置#bj内的HTML代码
//向#city增加一个广州
myClick("btn07",function(){
//向city中添加广州
var city = document.getElementById("city");
/**
* 使用innerHTML也可以完成DOM的增删改操作
* 一般我们会两种方式结合使用
*/
//city.innerHTML +="
广州"//创建一个
var li = document.createElement("li");
//向li中设置文本
li.innerHTML="广州";
//将li添加到city中
city.appendChild(li);
})
}
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.οnclick=fun;
}
你喜欢哪个城市？
- 北京
- 上海
- 东京
- 首尔
标签：city,DOM,JavaScript,改查,bj,li,var,document,节点
来源： https://blog.csdn.net/shang_0122/article/details/104812298