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对象。所以它并没有像移动那么多。

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

在div中添加div

3 个答案: