2条回答 默认 最新
- CSDN专家-林老师 2021-05-31 15:26关注
<!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 MATLAB动图问题
- ¥15 【提问】基于Invest的水源涵养
- ¥20 微信网友居然可以通过vx号找到我绑的手机号
- ¥15 寻一个支付宝扫码远程授权登录的软件助手app
- ¥15 解riccati方程组
- ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
- ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
- ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
- ¥50 树莓派安卓APK系统签名
- ¥65 汇编语言除法溢出问题