Javascript 笔记与总结(2-10)删除节点,创建节点
2023-09-11 14:17:03 时间
【删除节点】
步骤:
① 找到对象
② 找到他的父对象 parentObj
③ parentObj.removeChild(子对象);
【例】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width: 300px; height: 300px; background: blue; border-bottom: 1px solid black; } </style> <script> function del(){ var lis = document.getElementsByTagName("li"); var lastLi = lis[lis.length-1]; lastLi.parentNode.removeChild(lastLi); } </script> </head> <body> <input type="button" value="删除最后一个li" onclick="del();"> <ul> <li>白羊</li> <li>金牛</li> <li>双子</li> <li>巨蟹</li> </ul> </body> </html>
【创建节点】
步骤:
① 创建对象
② 找到父对象 parentObj
③ parentObj.addChild(对象);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{ width: 300px; height: 300px; background: blue; border-bottom: 1px solid black; } </style> <script> function add(){ //创建li var li = document.createElement("li"); //创建文本节点 var txt = document.createTextNode("海魔女"); //插入文本节点到li li.appendChild(txt); //把li插入ul document.getElementsByTagName("ul")[0].appendChild(li); } </script> </head> <body> <input type="button" value="追加一个li" onclick="add();"> <ul> <li>白羊</li> <li>金牛</li> <li>双子</li> <li>巨蟹</li> </ul> </body> </html>
相关文章
- javascript中的&& ||
- JavaScript HTML DOM 元素(节点)
- [Javascript] Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()
- [Javascript] Hide Properties from Showing Up in "for ... in" Loops in JavaScript
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Call Stack
- [Javascript]Clouse Cove, 2 ,Modifying Bound Values After Closure
- [Javascript] Convert a Callback-Based JavaScript Function to a Promise-Based One
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Ex: concatAll, map and filter
- [Javascript] Decorators in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Linting JavaScript with ESLint
- [Javascript] Hoisting in JavaScript
- JavaScript——数据类型
- JavaScript ES6对Proxy的原生支持的一个例子:开发人员学习额外的编程语言
- 用JavaScript实现的设计模式之commandline(命令行)模式
- Javascript诞生记
- 如何得到React应用转换后的JavaScript代码
- 从零开始学_JavaScript_系列(25)——dojo(10)摧毁一个widget
- ASP.NET—011:JavaScript报错常见问题
- 【 华为OD机试 2023】 微服务的集成测试(C++ Java JavaScript Python)
- Javascript 将字符串替换为特定的规律的字符串