一、点击按钮实现页面中的某些元素移动到 指定区域(根据用户输入)/ 规定区域(代码中写死的)
总结:使用 append(),prepend(),before(),after()实现移动页面元素(原来的消失);使用 innerHTML实现页面元素复制到指定区域。
通过 document.getElementById("demo").appendChild(document.getElementById("test")); 来实现
注意:1、也可以通过 getElementsByClassName() 等来实现;
2、这里的事件,除了appendChild() 外,还可以通过 append(),prepend(),before(),after() 来实现(innerHTML不行)。这四个方法将html代码转化为文本(包括页面标签)显示在指定区域。
示例如下:
<div class="div15"></div>
<hr>
<input type="button" value="添加" class="but15">
<hr>
<img src="killIE.jpg" alt="图片" id="IMGdemo" draggable οndragstart="ma1(event)">
<style>
.div15{
height:150px;
width: 500px;
}
</style>
<script>
document.getElementsByClassName("but15")[0].οnclick=function(){
document.getElementsByClassName("div15")[0].appendChild(document.getElementById("IMGdemo"));
}
</script>
可参考:http://www.w3school.com.cn/html5/html_5_draganddrop.asp
<div id="div11">
<p>测试数据,第一段</p>
<p>测试数据,第二段</p>
<p>测试数据,第三段</p>
</div>
<div id="div12"></div>
<hr>
<input type="button" value="点击" class="but11">
<style>
#div11,#div12{
height: 200px;
border:1px solid red;
}
</style>
<script>
$(function(){
$(".but11").click(function(){
var message=document.getElementById("div11").innerHTML;
console.log(message);
document.getElementById("div12").innerHTML=message;
});
});
</script>
总结:使用 append(),prepend(),before(),after()实现移动页面元素(原来的消失);使用 innerHTML实现页面元素复制到指定区域。