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;
				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(){
					//创建樱桃节点
  • 樱桃
  • 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 可能造成绑定好的事件失灵
    //一般两种方法结合使用 向下面这个样子 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>

    你可能感兴趣的:(JS,javascript,音视频,css3)