<!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>
