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

最新推荐文章于 2025-10-23 11:40:09 发布

原创最新推荐文章于 2025-10-23 11:40:09 发布 · 1.7w 阅读

5 ·

CC 4.0 BY-SA版权

JavaScript学习随笔专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何使用JavaScript实现网页元素的移动与复制。通过点击按钮，可以将指定元素移动到页面的另一区域或复制到目标位置。涉及的方法包括appendChild、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 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实现页面元素复制到指定区域。