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相关推荐

【javaScript】学完js基础，顺便把js高级语法学了（尚硅谷视频学习笔记）
文章目录 [1]基本总结深入一.什么是数据 1.数据类型基本(值)类型对象(引用)类型 2.判断相关问题二.什么是内存 1.什么是数据 2.什么是内存? 3.什么是变量 4.内存.数据.变量 ...
JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...
05 JS基础DOM
05 JS基础DOM JS的window对象定时器: window下一些方法: <script>弹出window.alert('hello')返回布尔值var ret = window.c ...
Mybatis基础：增删改查、模糊查询、多条件查询
Mybatis基础:增删改查.模糊查询.多条件查询http://www.bieryun.com/3132.html 1.新建测试数据库,根据实体类属性创建 2.实体类 [java] view plai ...
一篇文章教会你创建vue项目和使用vue.js实现数据增删改查
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
js操作indexedDB增删改查示例
js操作indexedDB增删改查示例 if ('indexedDB' in window) {// 如果数据库不存在则创建,如果存在但是version更大,会自动升级不会复制原来的版本var req ...
list vue 添加数据方法_一篇文章教会你创建vue项目和使用vue.js实现数据增删改查...
简介:一篇文章教会你创建vue项目和使用vue.js实现数据增删改查 [一.项目背景] 在管理员的一些后台页面里,数据列表中都会对这些数据进行增删改查的操作,例如管理员添加商品.修改商品价格.删除商品 ...
MySQL数据库基础表格——增删改查（下）
♥️作者:小刘在C站 ♥️个人主页:小刘主页 ♥️每天分享云计算网络运维课堂笔记,努力不一定有收获,但一定会有收获加油!一起努力,共赴美好人生! ♥️树高千尺,落叶归根人生不易,人间真情目录 MyS ...
IDEA2019 Java连接PostgreSQL数据库实现基础功能增删改查
IDEA2019 Java连接PostgreSQL数据库实现基础功能增删改查注意: 每个方法对应单个java类,可以自行进行整理汇总到一个类中一.Java通过JDBC连接到PostgreSQL数据 ...

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

JS基础-DOM增删改-尚硅谷视频p103相关推荐

最新文章

热门文章