當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/31 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 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(){//創建櫻桃節點<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>

總結

以上是生活随笔為你收集整理的JS基础-DOM增删改-尚硅谷视频p103的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python wget_python w
下一篇：校园网设计超超超级详细的配置来了（以河北