JS基础-DOM增删改-尚硅谷视频p103

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

比目鱼～

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

阅读量2.4k

点赞数 2

分类专栏： JS 文章标签： javascript 音视频 css3

本文链接：https://blog.csdn.net/qq_43624193/article/details/122675662

版权

JS 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

视频链接：
JS基础-DOM增删改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM增删改</title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#boddy{
				background-color: #f0f0f0;
				margin: 0 15%;
			}
			#inner{
				text-align: center;
			}
			#fru li{	
				display: inline-block;
				width: 100px;
				height: 30px;
				background-color: cornflowerblue ;
				line-height: 30px;
				color: white;
				border: 1px solid cornflowerblue;
				border-radius: 0 10px  ;
			}
			#btns{
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				myClick("btn01",function(){
					//创建樱桃节点<li>樱桃 </li>
					var li=document.createElement("li");
					//创建樱桃文本节点 文本内容是参数
					var ytText=document.createTextNode("樱桃");
					//将樱桃文本节点添加成li的子节点
					li.appendChild(ytText);
					//获取id为fru的结点
					var fru=document.getElementById("fru");
					fru.appendChild(li);
					//添加到fruit下面
				});
				myClick("btn02",function(){
					//创建一个樱桃
					
					var li=document.createElement("li");
					//创建樱桃文本节点 文本内容是参数
					var ytText=document.createTextNode("樱桃");
					//将樱桃文本节点添加成li的子节点
					li.appendChild(ytText);
					//获取id为西瓜的结点
					var xg=document.getElementById("xg");
					var fru=document.getElementById("fru");
					/**
					 * 在指定子节点前插入新的子节点
					 * 父节点.insertBefore(新结点,旧结点);
					 */
					fru.insertBefore(li,xg);
				});
				/**
				 * 使用樱桃替换xg结点
				 */
				myClick("btn03",function(){
				
					var li=document.createElement("li");
					//创建樱桃文本节点 文本内容是参数
					var ytText=document.createTextNode("樱桃");
					//将樱桃文本节点添加成li的子节点
					li.appendChild(ytText);
					//获取id为西瓜的结点
					//获取id为西瓜的结点
					var xg=document.getElementById("xg");
					var fru=document.getElementById("fru");
					/**
					 * replaceChild()可以使用指定子节点替换新结点
					 */
					fru.replaceChild(li,xg);
				});
				/**
				 *删除西瓜xg结点
				 */
				myClick("btn04",function(){
					var xg=document.getElementById("xg");
					var fru=document.getElementById("fru");
					xg.parentNode.removeChild(xg);
				});
				/*
				读取#fru内的HTML代码
				*/
				myClick("btn05",function(){
					var fru=document.getElementById("fru");
					alert(fru.innerHTML);
				});
				/**
				 * 获取xg内的HTML代码
				 */
				myClick("btn06",function(){
					var xg=document.getElementById("xg");
					alert(xg.innerHTML);//读取
					xg.innerHTML="榴莲";//修改
				});
				
				myClick("btn07",function(){
					//向fru中添加火龙果
					var fru=document.getElementById("fru");
					//用这个添加贼快  但不太建议这么用
					//fru.innerHTML+="<li>火龙果</li>"; //因为更新了所有的li 可能造成绑定好的事件失灵
					//一般两种方法结合使用 向下面这个样子
				    var li=document.createElement("li");
					li.innerHTML="火龙果";
					fru.appendChild(li);				
				});
				
			}
			function myClick(idStr,fun){
				var btn=document.getElementById(idStr);
				btn.onclick=fun;
			}
		</script>
	</head>
	<body>
		<div id="boddy">
			<div id="inner">
				<p>你最喜欢哪种水果~</p>
				<ul  id="fru" >
					<li id="xg">西瓜</li>
					<li>苹果</li>
					<li>香蕉</li>
					<li>葡萄</li>
				</ul>
			</div>
			<div id="btns">
				<button  id="btn01">添加一个樱桃</button>
				<button id="btn02">樱桃放到西瓜前面</button>
				<button id="btn03">移除一个西瓜，换成樱桃</button>
				<button id="btn04">移除一个西瓜</button>
				<button id="btn05">读取#fru内的HTML代码</button>
				<button id="btn06">读取xg内的HTML代码</button>
				<button id="btn07">向fru中添加火龙果</button>
			</div>
		</div>
	</body>
</html>

比目鱼～

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS基础-DOM增删改-尚硅谷视频p103

视频链接：JS基础-DOM增删改<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>DOM增删改</title> <style type="text/css"> *{ padding: 0; margin: 0; } #boddy{ background-color: #f0f0f0; ma
复制链接

扫一扫