jquery - 在一个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>

它的工作原理是它移动了 #box在#space里面，并且不会创建新的 #box目的。因此，与其说是增加，不如说是移动。