分析:
事件(onclick)
获取ul元素节点
创建一个城市的文本节点
创建一个li元素节点
将文本节点添加到li元素节点中去。
使用element里面的方法appendChild()来添加子节点
**以下两个方法很重要,但是在手册中查不到!
创建文本节点:document.createTextNode()
创建元素节点:document.createElement()**
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用js动态添加城市</title>
<link rel="stylesheet" href="">
</head>
<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>
<script type="text/javascript">
//1.获得input的id
//2.确定事件为 onclick
document.getElementById('btn').onclick = function(){
//3.获得ul的id
var ul1 = document.getElementById('ul1');
//3.创建文本节点
var li01 = document.createTextNode("深圳");//深圳
//3.创建文本元素
var li1 = document.createElement("li");//<li></li>
//4.把文本节点放到文本元素里
li1.appendChild(li01);//<li>深圳</li>
//5.把li元素放到ul中
ul1.appendChild(li1);
}
</script>
结果:
开始图片:
单击添加城市后,会自动添加“深圳”