let oDiv = document.createElement("div");
oDiv.style.width = "100px";
oDiv.style.height = "100px";
oDiv.style.background = "red";
document.body.appendChild(oDiv);
oDiv.style.width = "100px";
oDiv.style.height = "100px";
oDiv.style.background = "red";
document.body.appendChild(oDiv);
document.body.appendChild(oDiv);
JS中添加如上代码,本以为会生成两个div,但是!!没有,因为appendChild是将div搬家,而不是复制。
/*
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width:100px;
height:100px;
background:red;
}
#box2{
width:100px;
height:100px;
background:blue;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
</body>
<script type="text/javascript">
var oDiv2 = document.getElementById("box1");
document.body.appendChild(oDiv2); //会实现 box1 与 box2 交换位置
</script>
</html>
*/