javascript学习DOM2
2022/3/20 22:29:47
本文主要是介绍javascript学习DOM2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <!--为按钮button加入事件--> <button onclick="jiaTu()">添加图片</button> <button onclick="shanTu()">删除图片</button> <!--通过id将图片固定在div上--> <div id="imgs"></div> </div> <script type="text/javascript"> function jiaTu(){ //注意:不管是添加元素还是删除元素,都要通过父元素进行操作 var divJia = document.getElementById("imgs"); //创建图片标签 var img = document.createElement("img"); //设置标签属性 img.setAttribute("src","img/autumn.jpg"); img.setAttribute("width","200px"); img.setAttribute("height","200px"); //appendChild(img)为父元素添加一个子节点 divJia.appendChild(img) } //删除标签 function shanTu(){ //思路:先获得父元素,再获得子元素,通过父元素删除子元素 var divJian = document.getElementById("imgs") //parentNode:返回节点的父节点,removeChild(divJian):删除指定的节点 divJian.parentNode.removeChild(divJian) } </script> </body> </html>
这篇关于javascript学习DOM2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南