<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/css.css"/>
<script type="text/javascript">
window.onload = function(){
// 创建一 个"墨尔本"节点,添加到#city下
myClick("btn01",function(){
// 创建墨尔本节点<1i>墨尔本</li>
// 创建1i元素节点
/*
document . createElement ( )
可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//创建墨尔本文本节点
/*
document . createTextNode( )
可以用来创建一一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var mebText = document.createTextNode("墨尔本");
// 将mebText设置1i的子节点
/*
appendChild( )
- 向一个父节点中添加一-个新的子节点
- 用法:父节点. appendChild(子节点);
*/
li.appendChild(mebText);
// 获取id为city的节点
var city = document.getElementById("city");
// 将墨尔本添加到city下
city.appendChild(li);
});
// 将"墨尔本"节点插入到#wyn前面
myClick("btn02",function(){
//创建墨尔本
var li = document.createElement("li");
var mebText = document.createTextNode("墨尔本");
li.appendChild(mebText);
//获取id为eyn的节点
var eyn = document.getElementById("eyn");
//获取city
var city = document.getElementById("city");
/*
insertBefore( )
可以在指定的子节点前插入新的子节点
- 语法:
父节点. insertBefore (新节点,旧节点) ;
*/
city.insertBefore(li,wyn);
});
// 删除#wyn节点
myClick("btn04",function(){
// 获取id为wyn的节点
var wyn = document.getElementById("wyn");
//获取city
var city = document.getElementById("city");
/*
removeChild( )
- 可以删除一个子节点
- 语法:父节点。removeChild(子节点) ;
子节点.parentNode.removeChild(子节点) ;
*/
// city.removeChild(wyn);
wyn.parentNode.removeChild(wyn);
});
// 读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city");
console.log(city.innerHTML);
});
// 设置#wyn内的HTML代码
myClick("btn06",function(){
//获取wyn
var wyn = document.getElementById("wyn");
wyn.innerHTML = "海口";
});
myClick("btn07",function(){
// 向city内添加惠灵顿
var wyn = document.getElementById("city");
/*
使用innerHTML也可以完成DOM的增删改的相关操作
-般我们会两种方式结合使用
*/
city.innerHTML = "<li>惠灵顿</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="wyn">维也纳</li>
<li>多伦多</li>
<li>哥本哈根</li>
<li>温哥华</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"墨尔本"节点,添加到#city下</button></div>
<div><button id="btn02">将"墨尔本"节点插入到#wyn前面</button></div>
<div><button id="btn03">使用"墨尔本"节点替换#wyn节点</button></div>
<div><button id="btn04">删除#wyn节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#wyn内的HTML代码</button></div>
<div><button id="btn07">创建一个"墨尔本"节点,添加到#city下</button></div>
</div>
</body>
</html>
效果：
