3条回答 默认 最新
- CSDN专家-林老师 2021-05-31 15:27关注
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #container { width: 900px; height: 400px; } .img { width: 300px; height: 400px; float: left; } .img > img { width: 300px; height: 400px; } </style> </head> <body> <div class="oprate"> <button onclick="handleAddImg()">添加图片</button> <button onclick="handleRemoveImg()">删除图片</button> <button onclick="handleCopyImg()">复制图片</button> </div> <div id="container"> <div class="img"> <img src="./11.jpg" alt=""> </div> <div class="img"> <img src="./22.jpg" alt=""> </div> </div> <script> function handleAddImg() { var childNode = document.createElement('div') childNode.className = 'img' var imgNode = document.createElement('img') imgNode.setAttribute('src', './33.jpg') childNode.appendChild(imgNode) var container = document.getElementById('container') container.appendChild(childNode) } function handleRemoveImg() { var container = document.getElementById('container') container.removeChild(document.getElementsByClassName('img')[0]) } function handleCopyImg() { var container = document.getElementById('container') children = document.getElementsByClassName('img') child = children[children.length - 1].cloneNode(true) container.appendChild(child) } </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 乌班图ip地址配置及远程SSH
- ¥15 怎么让点阵屏显示静态爱心,用keiluVision5写出让点阵屏显示静态爱心的代码,越快越好
- ¥15 PSPICE制作一个加法器
- ¥15 javaweb项目无法正常跳转
- ¥15 VMBox虚拟机无法访问
- ¥15 skd显示找不到头文件
- ¥15 机器视觉中图片中长度与真实长度的关系
- ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
- ¥15 java 的protected权限 ,问题在注释里
- ¥15 这个是哪里有问题啊?