Web开发基础-JavaScript-20

Coder_Boy_

于 2018-07-14 23:29:01 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发

本文链接：https://blog.youkuaiyun.com/Coder_Boy_/article/details/81048665

Web开发专栏收录该内容

108 篇文章

订阅专栏

JS中DOM对象的使用——续

案例演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM对象</title>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li id="gz">广州</li>
			<li id="sz">深圳</li>
			<li id="tj">天津</li>
		</ul>
		
		<script type="text/javascript">
			//1.创建节点
			var li1 = document.createElement("li");
			li1.innerHTML = "重庆";
			var li2 = document.createElement("li");
			li2.innerHTML = "香港";
			
			//2.添加节点
			//2.1追加到最后
			var ul = document.getElementById("city");
			ul.appendChild(li1);
			//2.2插入到弟弟之前
			var gz = document.getElementById("gz");
			ul.insertBefore(li2,gz);
			
			//3.删除节点
			//3.1父亲删除孩子
			var sz = document.getElementById("sz");
			ul.removeChild(sz);
			
			//3.2自己删除自己
			var tj = document.getElementById("tj");
			tj.remove();
		</script>
	</body>
</html>

最终页面显示效果：