js DOM增删改方法以及练习
DOM增删改方法总结
DOM增删改方法大练习
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>js</title>
<style>
*{
margin:0px;
padding: 0px;
}
#inner{
float: left;
}
#btnlist{
float: right;
}
#city{
list-style: none;
text-indent: 10px;
}
li{
float: left;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 定义函数，为指定元素绑定单击响应函数
* idStr:id属性值
* fun:事件回调函数，当单击元素时函数被触发
*/
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
// btn01
myClick('btn01',function(){
// 创建一个“广州”节点，添加到#city下
// 1创建“广州”节点 <li>广州</li>
// 1.1 创建一个元素节点
var li = document.createElement('li');
// 1.2 创建一个文本节点
var gzText = document.createTextNode('广州');
// 1.3 将gzText设置为li的子节点
li.appendChild(gzText);
// 2添加到#city下
var city = document.getElementById('city');
city.appendChild(li);
});
// btn02
myClick('btn02',function(){
//将“广州”节点插入到#bj前面
// 1创建“广州”节点 <li>广州</li>
// 1.1 创建一个元素节点
var li = document.createElement('li');
// 1.2 创建一个文本节点
var gzText = document.createTextNode('广州');
// 1.3 将gzText设置为li的子节点
li.appendChild(gzText);
// 2插入到#bj前面
var city = document.getElementById('city');
var bj = document.getElementById('bj');
city.insertBefore(li,bj);
});
// btn03
myClick('btn03',function(){
//使用“广州”节点替换#bj节点
// 1创建“广州”节点 <li>广州</li>
// 1.1 创建一个元素节点
var li = document.createElement('li');
// 1.2 创建一个文本节点
var gzText = document.createTextNode('广州');
// 1.3 将gzText设置为li的子节点
li.appendChild(gzText);
// 2插入到#bj前面
var city = document.getElementById('city');
var bj = document.getElementById('bj');
city.replaceChild(li,bj);
});
// btn04
myClick('btn04',function(){
// 删除#bj节点
var bj = document.getElementById('bj');
// 第一种方法：知道它的父元素
// var city = document.getElementById('city');
// city.removeChild(bj);
// 第二种方法：不知道父元素，则需要先找到父元素在进行删除
// 【推荐使用】
bj.parentNode.removeChild(bj);
});
// btn05
myClick('btn05',function(){
//读取#city内的HTML代码
var city = document.getElementById('city');
console.log(city.innerHTML);
});
// btn06
myClick('btn06',function(){
//设置#bj内的HTML代码
var bj = document.getElementById('bj');
bj.innerHTML = '昌平';
});
// btn07
myClick('btn07',function(){
//用innerHTML方式创建“广州节点
// 第一种方法
// var city = document.getElementById('city');
// city.innerHTML += '<li>广州</li>';
// 第二种方法
var li = document.createElement('li');
li.innerHTML = '广州' ;
city.appendChild(li);
});
};
</script>
</head>
<body>
<div id='total'>
<div class='inner'>
<p>
你喜欢哪个城市？
</p>
<ul id='city'>
<li id='bj'>北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
<div id='btnlist'>
<div><button id='btn01'>01创建一个“广州”节点，添加到#city下</button></div>
<div><button id='btn02'>02将“广州”节点插入到#bj前面</button></div>
<div><button id='btn03'>03使用“广州”节点替换#bj节点</button></div>
<div><button id='btn04'>04删除#bj节点</button></div>
<div><button id='btn05'>05读取#city内的HTML代码</button></div>
<div><button id='btn06'>06设置#bj内的HTML代码</button></div>
<div><button id='btn07'>07用innerHTML方式创建“广州节点”</button></div>
</div>
</div>
</body>
</html>
效果图
此为学习笔记，仅供大家学习参考