在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;
}

希望有幫助！

編輯

使用帶有＃ #box OP基本代碼進行的有趣觀察：

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

它的工作方式是將#box #space ，並且不創建新的#box對象。 所以它並沒有增加太多。

Answer 2

當使用$('#box')您要告訴jQuery在DOM id='box'查找id='box'的元素，如果不存在，則不會添加任何內容。

您的網站上是否有#box元素？
否則，您可以嘗試以下操作：

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

Answer 3

您正在嘗試添加加載時頁面上不存在的id 。 您需要創建一個id為“ box”的div：

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

小提琴