添加新的父div，然后在此父div中添加下一个div

Question

I want to do a simple manipulation but i don't understand why it's don't work i have a div :

<input type='button' value='validate' class='popupjq'>

And i want to add a parent div to this input and also a 'brother' div for have this result :

<div id = 'id_parent'>
   <input type='button' value='validate' class='popupjq'>
   <div id = 'id_brother'></div>
</div>

So i use this javascript :

$(".popupjq").each(function() {
    var divParent = $("<div id = 'id_parent' style='display:inline-block; position:relative;'>");
    var divCache = $("<div id='toto'>");
    $(this).wrap(divParent);
    $(divParent).append(divCache);
});//bracket missing

My problem is that the parent div is create but not the brother div.

Answer 1

You can use insertAfter() to put the second element where you require:

$(".popupjq").each(function() {
    $(this).wrap('<div id="id_parent" style="display: inline-block; position: relative;"></div>');
    $('<div id="toto"></div>').insertAfter(this);
});

Example fiddle

Answer 2

• You haven't closed your each-loop properly (check brackets).
• You should specify the DIVs' HTML as strings.
• Using "each" implies you're planning to apply this method on several elements. In this case you should work with classes instead of IDs in your DIVs' HTML, since IDs are meant to exist exactly one time in the DOM.
• You haven't addressed your parent DIV properly (see my approach).

http://jsfiddle.net/1yn8qgg3 (CSS with background colors to visually mark the DIVs)

$(".popupjq").each(function() {
  var divParent = "<div class='class_parent'></div>";
  var divCache = "<div class='class_toto'></div>";
  $(this).wrap(divParent);
  $(this).parent().append(divCache);
});

Hope this helps.

Answer 3

Do the following, to get the result

$(function(){
$(".popupjq").each(function() {
    var divParent = $("<div id = 'id_parent' style='display:inline-block; position:relative;'> </div>");
    var divCache = $("<div id='toto'> </div>");
    $(this).wrap(divParent);
    $(this).append(divCache);
});

});

Fiddle