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

Question

我需要在 dive 中的所有其他内容之前插入 div，问题是我没有 div id，我只有 classes 作为选择器。 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 和 class 'divClass' 中插入动态 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>
<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.

中

Answer 1

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

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

Answer 2

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');
        });
    }

Answer 3

变化：

 $(element).before(e);

对于：

$(element).prepend(e);

Answer 4

你应该使用 jQuery 的前置函数。
这是有效的 fiddle:

$(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>

Answer 5

首先，如果您要为动态创建的 DOM 元素分配 ID，则 ID 必须是唯一的。这很简单。

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

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

Answer 6

只需使用 $(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);
});

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

How to insert div inside another div?

html

javascript

jquery

dom-manipulation