Append / Prepend in DIV with fixed child - jQuery

Navigation
2

How do I give append / prepend to a div that has a fixed child using jQuery.

For example: 

<div class="container">
    <div class="placeholder"></div>
</div>

When you give the first append / prepend, you need to insert the content after .placeholder . The next ones should be relative to the already added element.

For example: Append elem um 

<div class="container">
    <div class="placeholder"></div>
    <div class="elem um"></div>
</div>

Append elem dois 

<div class="container">
    <div class="placeholder"></div>
    <div class="elem um"></div>
    <div class="elem dois"></div>
</div>

Prepend elem tres 

<div class="container">
    <div class="placeholder"></div>
    <div class="elem tres"></div>
    <div class="elem um"></div>
    <div class="elem dois"></div>
</div>

I've tried: 

$('.container').find('.placeholder').after().prepend(elem_x);
$('.container').find('.placeholder').after().append(elem_x);

$('.container').find('.placeholder').next().prepend(elem_x);
$('.container').find('.placeholder').next().append(elem_x);
    
asked by anonymous 25.11.2015 / 13:46

2 answers

1

You can create a div just to serve container to the others and add the content within that div . Here's an example: 

$(document).ready(function() {
  var $divContainer = $('.container #minhaDiv');

  $divContainer.append('<div class="elem um">Um</div>');
  $divContainer.append('<div class="elem dois">Dois</div>');
  $divContainer.prepend('<div class="elem tres">Três</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container">
  <div class="placeholder">Placeholder</div>
  <div id="minhaDiv">

  </div>
</div>
    
25.11.2015 / 14:04
0

Try to do with :last-child after .placholder : 

$(".container").find(".placeholder").append("<div class='um'>Um</div>")
$(".container").find(".placeholder:last-child").append("<div class='dois'>Dois</div>")
$(".container").find(".placeholder:last-child").append("<div class='tres'>Tres</div>")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container">
    <div class="placeholder">Placeholder</div>
</div>
    
25.11.2015 / 14:01
How to show endpoint in maps by get? - javascript How can I make a link from my site open only when clicked on the same page? [closed]