Question

我有以下html页面。当我点击移动按钮时，我想从第一个div中删除一个特定项目（item2）并将其添加到第二个div。（最终这些项目将被替换为图像..但这是为了以后......）

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <style>
            #div1 {
            width: 300px;
            height: 200px;
            float: left;
            margin-right: 40px;
            background: lightGrey;
            }

            #div1 li{
                width: 150px;
                padding: 10px;
                border-bottom: 1px solid white;
                background: lightBlue;
                color: white;
            }

            #div2 {
            width: 300px;
            height: 200px;
            float: left;
            margin-right: 40px;
            background: lightGrey;
            }

            #div2 li{
                width: 150px;
                padding: 10px;
                border-bottom: 1px solid white;
                background: lightBlue;
                color: white;
            }
    </style>
    <script>

        function move()
        {
            //??? What goes here ???
        }

        function show1()
        {
            alert($('#div1').html());
        }

        function show2()
        {               
            alert($('#div2').html());
        }
    </script>

<body>
        <div id="div1">

            <li id="item1">Item 1</li>
            <li id="item2">Item 2</li>
            <li id="item3">Item 3</li>
        </div>

        <div id="div2">

            <li id="item4">Item 4</li>
            <li id="item5">Item 5</li>
            <li id="item6">Item 6</li>
        </div>

        <input type="button" value="Move" onClick="move()"/>
        <input type="button" value="Show Div1 Elements" onClick="show1()"/>
        <input type="button" value="Show Div2 Elements" onClick="show2()"/>
</body>
</html>

我应该在移动功能中写什么来实现这个目标？
当我点击Show Div1或Show Div2按钮时，它应该正确显示元素。
我也需要跟踪这些，即找出哪些div有哪些项目。

有什么建议吗？

Answer 1

您可以使用appendTo method：

尝试此代码

function move() {
    $('#item2').appendTo('#div2')
}

Answer 2

你可以尝试

http://api.jquery.com/append/

和

http://api.jquery.com/remove/

你也可以

使用

http://api.jquery.com/children/

和

http://api.jquery.com/empty/

Answer 3

 // From which you will get content     
 var a=document.getElementById('youritem').innerHTML;

 // Get all content from container then append content and generate new content
 var c=document.getElementById('#div2').innerHTML;
 var b=a+c;

 // Then assign new content to Your div
 document.getElementById('#div2').innerHTML=b;

 // --------- or you can use

 function move() {
   $('#item').appendTo('#yourdiv')
 }

从div中删除项目，并将其添加到另一个div（jquery / javascript）

3 个答案: