1. See renderings
1.1 knowledge points
1.1.1createElement()
createElement()
/*
* document.createElement()
* 可以用于创建一个元素节点对象，
* 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
* 并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
1.1.2createTextNode()
createTextNode()
/*
* document.createTextNode()
* 可以用来创建一个文本节点对象
* 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document.createTextNode("广州");
1.1.3appendChild()
appendChild()
//将gzText设置li的子节点
/*
* appendChild()
* - 向一个父节点中添加一个新的子节点
* - 用法：父节点.appendChild(子节点);
*/
li.appendChild(gzText);
1.1.4insertBefore()
insertBefore()
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li, bj);
1.1.5 replaceChild()
replaceChild（）
/*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replaceChild(新节点,旧节点);
*/
1.1.6parentNode.removeChild（）
var bj = document.getElementById("bj");
//city.removeChild(bj);
//或者可以采用 子节点.parentNode.removeChild()
//这属于自杀，更常用点
bj.parentNode.removeChild(bj);
Child node.parentNode.removeChild()
1.1.7
//这样也能添加，而且比较灵活
var city = document.getElementById("city");
city.innerHTML += "<li>广州</li>";
var li = document.createElement (“li”);
li.innerHTML = “广州”;
city.appendChild (li);
var city = document.getElementById("city");
//city.innerHTML += "<li>广州</li>";
一般来说，采用下面这种方式比较好
※※※※※※※※※※※※※※※※※※※※※※
var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);
※※※※※※※※※※※※※※※※※※※※※※
2. On the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#total {
width: 450px;
border: blueviolet;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
}
li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 15px;
background-color: #F0F8FF;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin: 10px;
padding: 10px;
overflow: hidden;
float: left;
}
#btnlist {
padding-top: 10px;
width: 100px;
height: 300px;
float: inline-end;
overflow: hidden;
}
#btnlist button {
width: 100px;
height: 40px;
}
</style>
</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 id="btn1"><button>创建一个广州节点，添加到#city下</button></div>
<div id="btn2"><button>将广州节点插入到#bj前面</button></div>
<div id="btn3"><button>广州节点替换到#bj</button></div>
<div id="btn4"><button>删除#bj节点</button></div>
<div id="btn5"><button>读取city内html代码</button></div>
<div id="btn6"><button>设置#bj内html代码</button></div>
<div id="btn7"><button>创建一个广州节点，添加到#city</button></div>
</div>
<script type="text/javascript">
//偷个懒发挥程序员的优良传统
function myClick(idstr, fun) {
var btn = document.getElementById(idstr);
btn.onclick = fun;
};
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//创建一个"广州"节点,添加到#city下
myClick("btn1", function() {
//创建广州节点 <li>广州</li>
//创建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);
});
myClick("btn2", function() {
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取bj节点
var bj = document.getElementById("bj");
var city = document.getElementById("city");
//父节点去调
/*
* insertBefore()
* - 可以在指定的子节点前插入新的子节点
* - 语法：
* 父节点.insertBefore(新节点,旧节点);
*/
city.insertBefore(li, bj);
});
myClick("btn3",function(){
/*
* replaceChild()
* - 可以使用指定的子节点替换已有的子节点
* - 语法：父节点.replaceChild(新节点,旧节点);
*/
var bj = document.getElementById("bj");
var city = document.getElementById("city");
city.replaceChild(li, bj);
});
myClick("btn4",function(){
var city = document.getElementById("city");
var bj = document.getElementById("bj");
//city.removeChild(bj);
//或者可以采用 子节点.parentNode.removeChild()
//这属于自杀，更常用点
bj.parentNode.removeChild(bj);
});
myClick("btn5",function(){
var city = document.getElementById("city");
console.log(city.innerHTML);
});
myClick("btn6",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn7",function(){
var city = document.getElementById("city");
//city.innerHTML += "<li>广州</li>";
//一般来说，采用下面这种方式比较好
//※※※※※※※※※※※※※※※※※※※※※※
var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);
//※※※※※※※※※※※※※※※※※※※※※※
});
</script>
</body>
</html>