如何在另一个 div 中插入 div？答案

【问题标题】：How to insert div inside another div?如何在另一个 div 中插入 div？
【发布时间】：2015-07-01 23:28:15
【问题描述】：

我需要在所有其他内容之前将 div 插入到潜水中，问题是我没有 div id，我只有类作为选择器。 div 生成不在我的控制范围内。

假设，

<div class="divClass" >
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>
<div class="divClass">
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>

我需要将动态 div 插入到外部 div 中，类为“divClass”。所以输出看起来像这样，

<div class="divClass" >
    <div id="mydiv" class="mydivclass"></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>
<div class="divClass">
    <div id="mydiv" class="mydivclass"></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
    <div class="divInnerClass" ></div>
</div>

我已经尝试如下，

function AddSubMenuHeadings() {
            //Get all grouping for each menu 
            //1.Files Menu
            $('.filesMenu .divClass').each(function (index, ele) {
                debugger;
                var e = $('<div style="display:block; float:left;">somesubmenuheading</div>');
                var element = $('.filesMenu .' + ele.className + ' .divInnerClass')[0];
                $(element).before(e);
                e.attr('id', 'myid');
                //alert(ele);
            });
        }

但这给了我错误的输出。它将所有动态生成的 div 插入到第一个父 div 中。

【问题讨论】：

附注，ID必须是唯一的。
是的，这只是示例代码错误。我正在处理它的 id 部分。
$(ele).prepend(e); 而不是 $(element).before(e); -- 循环中的 var ele 指的是您要将项目添加到的 .divClass 元素。
@Ted 谢谢。现在我觉得自己很愚蠢。写为答案我会将其标记为答案。
@user2745246 在下面添加了它，并对 jQueryness 进行了调整:)

标签： javascript jquery html dom-manipulation

【解决方案1】：

您应该使用 jQuery 的 prepend 功能。
这是工作小提琴：

$(document).ready(function () {

    $("button").click(function () {
        $(".divClass").prepend('<div id="mydiv" class="mydivclass">NEW CONTENT</div> ');
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divClass">
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
</div>
<div class="divClass">
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
    <div class="divInnerClass">asdg</div>
</div>
<button>Prepend div</button>

【讨论】：

【解决方案2】：

只需使用$(ele).prepend(e); 而不是$(element).before(e);-- 在您的示例中，循环中的var ele 指的是您要添加项目的.divClass 元素。

但是，我会写得有点不同，像这样：

$('.filesMenu .divClass').each(function (index, ele) {
    var $div = $('<div/>')
        .css({'display':'block', 'float':'left'})
        .attr('id', 'myId')//make the id dynamic
        .prependTo(ele);
});

【讨论】：

【解决方案3】：

你为什么不简单地使用 jQuery .prepend() ？

http://api.jquery.com/prepend/

【讨论】：

【解决方案4】：

function AddSubMenuHeadings() {
        $('.filesMenu .divClass').each(function (index, ele) {
            var e = $('<div style="display:block; float:left;">somesubmenuheading</div>');

            $(ele).prepend(e);
            e.attr('id', 'myid');
        });
    }

【讨论】：

【解决方案5】：

变化：

 $(element).before(e);

为：

$(element).prepend(e);

【讨论】：

【解决方案6】：

首先，如果您要为动态创建的 DOM 元素分配 ID，则 ID 必须是唯一的。这是非常微不足道的。

如果您使用 jQuery，为什么不使用 prepend()？

$(document).ready(function(){
    $(".divClass").prepend(e);
});

【讨论】：