javascript 动态添加城市
Posted 篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 动态添加城市相关的知识,希望对你有一定的参考价值。 匿名函数的使用 createTextnode 创建文本 createElement 创建元素 appendChild 将文本或元素追加 以上是关于javascript 动态添加城市的主要内容,如果未能解决你的问题,请参考以下文章 sublime text 3 添加 javascript 代码片段 ( snippet )<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
//1.获取ul元素节点
var ulEle = document.getElementById("ul1");
//2.创建城市文本节点
var textNode = document.createTextNode("深圳");//深圳
//3.创建li元素节点
var liEle = document.createElement("li");//<li></li>
//4.将城市文本节点添加到li元素节点中去
liEle.appendChild(textNode);//<li>深圳</li>
//5.将li添加到ul中去
ulEle.appendChild(liEle);
}
}
</script>
</head>
<body>
<input type="button" value="添加新城市" id="btn"/>
<ul id="ul1">
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</body>
</html>