<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
myClick("btn01",function(){
// alert("hello");//测试是否运行
/*---------------1.创建一个“广州”节点，添加到#city下--------------------*/
// 创建广州节点<li>广州</li>
/*创建li元素节点
document.createElement()
可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据标签名创建元素节点对象，
并将创建好的对象作为返回值返回
*/
var li=document.createElement("li");
// alert(li);//测试
/*创建广州文本节点
document.createTextNode()
可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText=document.createTextNode("广州");
// alert(gzText);//测试
// 将gzText设置的li的子节点
/*
appendChild()
-向一个父节点中添加一个新的子节点
-用法：父节点.appendChild(子节点)；
*/
li.appendChild(gzText);
// 获取id为city的节点
var city=document.getElementById("city");
// 将广州添加到city下
city.appendChild(li);
});
/*---------------2.将“广州”节点插入到#bj前面--------------------------*/
myClick("btn02",function(){
// 创建一个广州
var li=document.createElement("li");
var gzTest=document.createTextNode("广州");
li.appendChild(gzTest);
// 获取id为bj的节点
var bj=document.getElementById("bj");
// 获取city
var city=document.getElementById("city");
/*
insertBefore()
-可以在指定的子节点前插入新的子节点
-语法：
父节点.insertBefore(新节点，旧节点);
*/
city.insertBefore(li,bj);
});
/*----------- 3.使用“广州”节点替换#bj节点-----------------------------*/
myClick("btn03",function(){
var li=document.createElement("li");
var gzTest=document.createTextNode("广州");
li.appendChild(gzTest);
var bj=document.getElementById("bj");
var city=document.getElementById("city");
city.replaceChild(li,bj);
/*
replaceChild()
-可以使用指定的子节点替换已有的子节点
-语法：父节点.replaceChild(新节点，旧节点);
*/
});
/*--------------- 4.删除#bj节点--------------------------------*/
myClick("btn04",function(){
var bj=document.getElementById("bj");
var city=document.getElementById("city")
// city.removeChild(bj);
bj.parentNode.removeChild(bj);
/*
removeChild()
-可以删除一个子节点
-语法：父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点);
*/
});
/*------------- 5.读取#city内的HTML代码-------------*/
myClick("btn05",function(){
var city=document.getElementById("city");
console.log(city.innerHTML);
});
/*---------------6.设置#bj内的HTML代码-------------*/
myClick("btn06", function () {
var bj=document.getElementById("bj");
bj.innerHTML="昌平"
});
/*---------------7.创建一个“广州”节点，添加到#city下--------------------*/
myClick("btn07", function () {
var city=document.getElementById("city");
// city.innerHTML +="<li>广州</li>";
/*
使用innerHTML也可以完成DOM的增删改的相关操作
一般我们会两种方式结合使用
*/
var li=document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);
});
};
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
</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>
<div id="btnList">
<div><button id="btn01">创建一个“广州”节点，添加到#city下</button></div>
<div><button id="btn02">将“广州”节点插入到#bj前面</button></div>
<div><button id="btn03">使用“广州”节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">设置#bj内的HTML代码</button></div>
</div>
</body>
</html>
浙公网安备 33010602011771号