3条回答 默认 最新
- CSDN专家-林老师 2021-05-31 07: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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报