Javascript 创建Div并附加到另一个Div中

我有一个主容器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>

$（函数（）{
$（“#容器”）.sortable（）；
$（“#容器”）.disableSelection（）；
});
函数popUp（）{
var popup=document.createElement（'div'）；
popup.className='box3'；



单击我添加


单击我添加

想法？建议？

一些简单的事情，比如：

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

JSFiddle： 因此，您的完整代码的结尾如下：

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

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

$（函数（）{
$（“#容器”）.sortable（）；
$（“#容器”）.disableSelection（）；
$（'#add3'）。单击（函数（）{
$（''）.addClass（'box3'）.appendTo（'#container'）；
});
});

当然，您在新的div中没有任何内容，但是您没有指定下一步要使用它做什么

更新以使用LI：

$（“
”）.addClass（'box3'）.text（“hello”）.appendTo（'#container'）；

这一个将向您的容器UL添加新的LIs（例如，简单地说“hello”）

注:

---

您想将

DIV

插入

UL

（

id=container

）中，这不是有效的HTML标记。您需要更清楚地了解其预期用途。

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

考虑以下

div

结构：

---

上面两行之间的区别是返回的内容，appendTo返回

#minidiv1

元素，append将返回

#container

元素。

此外，内联处理程序读取

popup（）

而您的实际函数名是

popUp

。您可能想将内联替换为jQuery事件侦听器。您的容器是UL，因此直接在该元素中插入div是无效的。请澄清将在何处添加div。老实说，我忘了，这将创建一个

，并将其放在c上的列表中lickingHave更新了最后一个例子给我们，而不是LI:）不完全是我想要的，但应该能够使用它，我需要创建一个完整的新div，而不是仅仅移动前一个div。这是创建一个新div…这就是$（''）所做的-注入HTML元素（很抱歉，我修复了示例中的打字错误-丢失了最重要的

）：）

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

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

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

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

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