创建Div并在另一个div中追加

Question

我有一个主容器div和一个侧边栏div。单击其中一个侧边栏div时，我想创建一个位于容器div内的div。这是我到目前为止所拥有的。

    <script>

$(function() {
$( "#container" ).sortable();
$( "#container" ).disableSelection();
});

function popUp(){
    var popup = document.createElement('div');
    popup.className = 'box3';

</script>

<ul id="container" style="position:relative;width:815;height:870;margin:20px;background-color:gray;">

    <li class="box2"></li>




</ul>
<div style="position:absolute;top:20;left:850;height:870px;width:320px;background-color:yellow;padding-left:15px;float:left;">
    <div id="add3" class="box3" style="height:15%;width:40%;" onclick="popup()" >Click Me to Add</div>
    <br/>
    <div id="add2" class="box2" style="height:15%;width:80%;">Click Me to Add</div>
</div>

思考？建议？

Answer 1

简单的事情：

function popUp(){
    $('<div>').addClass('box3').appendTo('#container');
}

$('<div>')使用jQuery创建一个添加了类的新DIV元素，然后将其附加到容器*。

你也应该在代码中附加点击监听器（摆脱onClick=）：

$('#add3').click(function(){
        $('<div>').addClass('box3').appendTo('#container');
});

JSFiddle：http://jsfiddle.net/TrueBlueAussie/K269E/3/

所以你的完整代码结束了：

$(function () {
    $("#container").sortable();
    $("#container").disableSelection();

    $('#add3').click(function () {
        $('<div>').addClass('box3').appendTo('#container');
    });
});

你当然没有新div中的任何内容，但是你还没有用它来指定你想做什么

更新以使用LI：http://jsfiddle.net/TrueBlueAussie/K269E/7/

$('<li>').addClass('box3').text("hello").appendTo('#container');

这个将为你的容器UL添加新的LI（简单地说“你好”作为例子）。

注意：

您希望将DIV注入UL（id=container），这是无效的HTML标记。您需要对预期用途更清楚一点。

Answer 2

我想使用javascript将嵌套的DIV从侧边栏移动到容器中。

考虑以下div结构：

<div id="sidebar">
   <div id="minidiv1">a</div>
   <div id="minidiv2">b</div>
</div>
<div id="container"></div>

要完成此操作，我只需将minidiv1附加到container，它就会更改其在DOM中的位置：

$('#minidiv1').appendTo('#container'); 
// or
$('#container').append('#minidiv1');

以上两行之间的差异是返回的内容，appendTo返回#minidiv1元素，append将返回#container元素。