Append/Prepend in DIV with fixed child – jQuery

Question:

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

For example:

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

When I give the first append/prepend I need the content to be inserted after the .placeholder . The next ones must be relative to the element already added.

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>

Already 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);

Answer:

You can create a div just to serve as a container for others and add the content inside that div . See 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>
<div class="container">
  <div class="placeholder">Placeholder</div>
  <div id="minhaDiv">

  </div>
</div>
Scroll to Top