從div中刪除項目，並將其添加到另一個div（jquery/javascript）

-2

我有以下的html頁面。當我點擊移動按鈕時，我想從第一個div刪除特定項目（item2）並將其添加到第二個div。（最終這些項目將與圖片更換..但這是後...）從div中刪除項目，並將其添加到另一個div（jquery/javascript）

<!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>

我應該在移動功能，寫什麼來實現這一目標？
當我點擊顯示Div1或顯示Div2按鈕時，它應該正確顯示元素。
我需要跟蹤這些，也就是找到哪些div有什麼項目。

有什麼建議嗎？

來源

2013-07-22 Jasper

你可以試試這個代碼，使用appendTo method：

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

來源

2013-07-22 12:08:24

盧卡斯我已經在這裏發表相關拖n個墨滴問題：http://stackoverflow.com/questions/ 17788504 /拖和下拉式的項目，從一-DIV到另一個與 - 正確-HTML太jQuery的JAV – Jasper

-1

// 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') 
}

來源

2013-07-22 12:12:06

您可以嘗試

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

和

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

您還可以

使用

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

和

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

來源