• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

一觉至天明

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

JS案例六_1:添加城市

使用的相关知识点:对子节点的添加:document.appendClild()
文本节点的创建:document.createTextNode()
元素节点的创建:document.createElement()

<!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("ulEle");
					//2、创建文本节点
					var textNode = document.createTextNode("高松");
					//3、创建li节点<li></li>
					var liEle = document.createElement("li");
					//4、将文本节点添加到li节点中
					liEle.appendChild(textNode);
					//5、将李li节点添加至ul节点中
					ulEle.appendChild(liEle);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加" id="btn" />
		<ul id="ulEle">
			<li>上海</li><li>新西兰</li><li>东京</li><li>莫斯科</li>
		</ul>
	</body>
</html>

posted on 2018-08-31 11:38  一觉至天明  阅读(223)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3