<!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>
这道题需要用到dom节点的JS操作,题主可以先写好基本的html代码,加入div和img图片,遇到问题再讨论
您的问题已经有小伙伴解答了,请点击【采纳】按钮,采纳帮您提供解决思路的答案,给回答的人一些鼓励哦~~
ps:开通问答VIP,享受5次/月 有问必答服务,了解详情↓↓↓
【电脑端】戳>>> https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】 戳>>> https://mall.csdn.net/item/52471?utm_source=1146287632