添加一個div一個div內

Question

CSS：

#space{ 
    float: left; 
    width: 500px; 
    height: 500px; 
    background:blue; 
    } 
#button{ 
    float: left; 
    width: 200px; 
    height: 500px; 
    background:red; 
    cursor: pointer; 
} 
#box{ 
    width: 100px; 
    height: 100px; 
    background: white; 
} 

HTML：

<div id="space"></div> 
<div id="button"></div> 

的javascript：

$("#button").click(function(){ 
    $("#space").append($('#box')); 
}); 

我嘗試添加在div 「盒子」 到div「空間「每次點擊div」按鈕「。但代碼不起作用。任何人都可以說它的錯誤是什麼？

Answer 1

您近了，但現在Javascript不知道什麼#box是。要在按下一個按鈕添加一個<div>到<div>，做到這一點（和你接近）：

$("#button").click(function(){ 
    $("#space").append('<div></div>'); 
}); 

東西要記住，id的需要是唯一的，所以請嘗試使用類代替，並調整您的CSS目標類：

// Javascript 
$("#button").click(function(){ 
    $("#space").append('<div class="box"></div>'); 
}); 

// CSS 
.box{ 
    width: 100px; 
    height: 100px; 
    background: white; 
} 

希望幫助！

編輯

只需使用OP的基本代碼與#box提出了一個有趣的觀察：

// Before Click 
<div id="space">Space</div> 
<div id="box">Box</div> 
<div id="button">Button</div> 

// After Click 
<div id="space">Space 
    <div id="box">Box</div> 
</div> 
<div id="button">Button</div> 

它的工作原理，它移動#space內#box，並不會創建一個新的#box對象。所以它不像移動那麼多。

Answer 2

當你使用$('#box')時，你告訴jQuery在你的DOM中尋找一個id='box'的元素，如果它不存在，你不會追加任何東西。

你的網站上有#box元素嗎？
否則，你可以試試這個：

$("#button").click(function(){ 
    $("#space").append('<div id="box"></div>'); 
}); 

Answer 3

你試圖附加一個id加載時不存在於頁面上。你需要用 「盒子」 的id創建DIV：

$("#button").click(function(){ 
    $("#space").append('<div id="box"></div>'); 
}); 

FIDDLE