Js之DOM对象的增删改查

最新推荐文章于 2024-04-16 17:07:56 发布

PCC.

最新推荐文章于 2024-04-16 17:07:56 发布

阅读量120

点赞数

分类专栏：前端-JavaScript基础文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_44278828/article/details/120654449

版权

前端-JavaScript基础专栏收录该内容

27 篇文章 2 订阅

订阅专栏

DOM的增删改查操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>DOM增删改</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
			window.onload = function () {
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function () {
					/*
                创建一个"广州"节点,添加到#city下
                步骤：
                1、创建一个li节点
                2、创建一个文本节点
                3、将文本节点添加到li节点之下
                4、将li节点添加到city节点之下
                 */
					var li = document.createElement("li");
					var GZtext = document.createTextNode("广州");
					li.appendChild(GZtext);
					var city = document.getElementById("city");
					city.appendChild(li);
				}

				var btn02 = document.getElementById("btn02");
				btn02.onclick = function () {
					/*
					将"广州"节点插入到#bj前面
					步骤和上面差不多，不同的是使用insertBefore
					 */

					var li = document.createElement("li");
					var GZtext = document.createTextNode("广州");
					li.appendChild(GZtext);
					var bj = document.getElementById("bj");//找到北京节点
					var city = document.getElementById("city");//找到city节点
					city.insertBefore(li, bj);//在city节点里面，将li插入到bj前面
				}

				var btn03 = document.getElementById("btn03");
				btn03.onclick = function () {
					/*
					使用"广州"节点替换#bj节点
					使用replaceChild
					 */
					var li = document.createElement("li");
					var GZtext = document.createTextNode("广州");
					li.appendChild(GZtext);
					var city = document.getElementById("city");
					var bj = document.getElementById("bj");
					city.replaceChild(li, bj);
				}

				var btn04 = document.getElementById("btn04");
				btn04.onclick = function () {
					/*
					删除#bj节点：使用removeChild，有两种使用方法
					1、父节点.removeChild;
					2、子节点.parentNode.removeChild，这种方法好处就是不用找到删除节点的父节点，直接通过要删除的节点就可以实现删除
					 */
					var bj = document.getElementById("bj");
					bj.parentNode.removeChild(bj);
				}

				var btn05 = document.getElementById("btn05");
				btn05.onclick = function () {
					/*
					读取#city内的HTML代码：使用innerHTML
					 */
					var city = document.getElementById("city");
					alert(city.innerHTML);
				}

				var btn06 = document.getElementById("btn06");
				btn06.onclick = function () {
					/*
					设置#bj内的HTML代码
					 */
					var bj = document.getElementById("bj");
					bj.innerHTML ="广州";
				}

				var btn07 = document.getElementById("btn07");
				btn07.onclick = function () {
					/*
					创建一个"广州"节点,添加到#city下
					可以使用最上面的那种方法，也可以直接使用这种方法
					 */
					var city = document.getElementById("city");
					city.innerHTML += "<li>广州</li>";
				}
			}
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>