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

Question

Мне нужно вставить 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.

Answer 1

Просто используйте $(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); 
}); 

Answer 2

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

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

Answer 3

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 4

Изменение:

$(element).before(e); 

Для:

$(element).prepend(e); 

Answer 5

Вы должны использовать функцию в 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>

Answer 6

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

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

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