DOM 动态添加城市

最新推荐文章于 2019-10-27 07:47:39 发布

酷爱WAF哈狗帮

最新推荐文章于 2019-10-27 07:47:39 发布

阅读量170

点赞数

分类专栏： JavaWeb前端

本文链接：https://blog.csdn.net/HuashirenYty/article/details/102729207

版权

JavaWeb前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

liveAddCity.html

<!DOCTYPE html>
<html>
  <head>
    <title>动态添加城市</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
	<script type="text/javascript">
		window.onload = function() {
			document.getElementById("btn").onclick = function() {
				//获取ul元素节点
				var ulEle = document.getElementById("ul1");
				//创建城市文本节点
				var textNode = document.createTextNode("南京");
				//创建li元素节点
				var liEle = document.createElement("li");
				//将文本节点添加到li元素中
				liEle.appendChild(textNode);
				//将li元素添加到ul元素中
				ulEle.appendChild(liEle);
			}
		}
	</script>
	
  </head>
  
  <body>
   		<input type="button" value="添加新的城市" id="btn" />
   		<ol id="ul1">
   			<li>北京</li>
   			<li>上海</li>
   			<li>深圳</li>
   		</ol>
  </body>
</html>

酷爱WAF哈狗帮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM 动态添加城市

liveAddCity.html<!DOCTYPE html><html> <head> <title>动态添加城市</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="de...
复制链接

扫一扫