实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
#left{
width: 200px;
height: 200px;
border:1px solid red;
}
#des{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="left">
<button onclick="move(this)">点击移动</button>
</div>
<div id="des"></div>
</body>
<script type="text/javascript">
//创建div节点，只是创建一个对象而已
var div = document.createElement('div');
//修改节点
div.innerHTML = '***不会游泳';
//添加节点，此方法需要先创建后添加
document.body.appendChild(div);
//将div添加到body的某个位置上
document.body.insertBefore(div,document.body.firstChild);
function move(obj){
var des = document.getElementById('des');
//对象是不会凭空产生的
//如果操作的对象是我们找到的节点，也就是本来就在DOM节点数中的内容
//那么会出现剪切的效果
des.appendChild(obj);
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
