Как вставить div внутри другого div?

Мне нужно вставить div внутри погружения перед всем остальным его содержимым, проблема в том, что у меня нет идентификаторов 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 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.

Источник

6 ответов

Решение

Просто использовать $(ele).prepend(e); вместо $(element).before(e);- в вашем примере, вар 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);
});
Источник

Вы должны использовать функцию prepend в jQuery.
Вот рабочая скрипка:

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

Источник

Почему бы вам просто не использовать jQuery.prepend()?

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

Источник

Изменить:

 $(element).before(e);

За:

$(element).prepend(e);
Источник 
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');
        });
    }
Источник

Прежде всего, если вы собираетесь назначать идентификаторы динамически создаваемым элементам DOM, идентификаторы должны быть уникальными. Это довольно тривиально.

Если вы используете jQuery, почему бы не использовать prepend()?

$(document).ready(function(){
    $(".divClass").prepend(e);
});
Источник
Другие вопросы по тегам