JS移动某些元素到指定位置

一、点击按钮实现页面中的某些元素移动到 指定区域（根据用户输入）/ 规定区域（代码中写死的）

通过 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 ondragstart="ma1(event)">        <style>        .div15{            height:150px;            width: 500px;        }        </style>        <script>        document.getElementsByClassName("but15")[0].onclick=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实现页面元素复制到指定区域。