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

Create Div and Append inside another div

本文关键字：Div 追加 另一个 创建      更新时间：2023-09-26

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

想法吗?建议吗?

比如:

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(作为一个例子，它只是说"hello")。

注意:

您想要将DIV注入UL (id=container)，这是无效的HTML标记。您需要更清楚地了解预期用途

我想使用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元素。

相关文章：