js基础_63、DOM增删改
DOM相关操作
使用innertHtml也可以完成DOM相关操作，不过它是把全部内容删了重新加载的，动静太大，一般结合DOM相关操作的方式同时使用。
document.createElement()
可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。
document.createTextNode()
可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。
appendChild()
—-向一个父节点中添加一个新的子节点，
—-语法：父节点.appendChild(子节点);
insertBefore()
—-在指定的子节点(已有的子节点)前插入新的子节点。
—-语法：
父节点.insertBefore(新的子节点，旧的子节点);
replaceChild()
—-可以使用指定的子节点替换已有的子节点。
—-语法：
父节点.replaceChild(新的子节点，已有的子节点);
removeChild()
—-可以删除一个子节点。
—-语法：
父节点.removeChild(指定的子节点);
或者
指定的子节点.parentNode.removeChild(指定的子节点);
具体操作实例代码：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="./css/css.css" />
<script type="text/javascript">
window.onload=function(){
//创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
// //创建li元素节点
// var li=document.createElement("li");
// //创建广州文本节点
// var gzText=document.createTextNode("广州");
// //将gzText设置为li的子节点
// li.appendChild(gzText);
// //获取id为city的节点
// var city=document.getElementById("city");
// //将广州添加到city下
// city.appendChild(li);
//方式2
//创建li元素节点
var li=document.createElement("li");
li.innerHTML="广州";
//获取id为city的节点
var city=document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
//将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建li元素节点
var li=document.createElement("li");
//创建广州文本节点
var gzText=document.createTextNode("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);
//获取id为city的节点
var city=document.getElementById("city");
//通过父节点的方法将新的子节点插入到已有的子节点前
city.insertBefore(li,bj);
});
//使用"广州"节点替换#bj节点
myClick("btn03",function(){
//创建li元素节点
var li=document.createElement("li");
//创建广州文本节点
var gzText=document.createTextNode("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);
//获取id为bj的节点
var bj=document.getElementById("bj");
//获取id为city的节点
var city=document.getElementById("city");
//通过父节点的方法用新的子节点替换已有的子节点
city.replaceChild(li,bj);
});
//删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj=document.getElementById("bj");
//通过父节点的方法删除指定的子节点
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05",function(){
//获取id为bj的节点
var city=document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06",function(){
//获取id为bj的节点
var bj=document.getElementById("bj");
//通过父节点的方法删除指定的子节点
bj.innerHTML="成都";
});
}
//绑定单击响应函数的函数
var myClick=function(nodeId,fun){
var nownode=document.getElementById(nodeId);
nownode.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>
</body>
</html>
css样式：
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float:left;
}
#total{
width: 450px;
float:left;
}
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li{
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float:left;
}
.inner{
width:400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
