3

Como faço para dar append/prepend em uma div que possui um filho fixo usando jQuery.

Por exemplo:

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

Quando der o primeiro append/prepend preciso que o conteúdo seja inserido após o .placeholder. Os próximos devem ser relativos ao elemento já adicionado.

Por exemplo: 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>

Já tentei:

$('.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);
2
  • ja tentou o append sem o after? Commented 25/11/2015 às 12:50
  • Funciona somente para o append, no prepend a div é inserida antes do placeholder.
    – Russ_AB
    Commented 25/11/2015 às 12:55

2 Respostas 2

2

Você pode criar uma div apenas para servir de container para as demais e adicionar o conteúdo dentro dessa div. Veja um exemplo:

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

1
  • Não é exatamente o que eu precisava, mas vai funcionar. Obrigado.
    – Russ_AB
    Commented 25/11/2015 às 13:11
0

Tente fazer com o :last-child após o .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>
<div class="container">
    <div class="placeholder">Placeholder</div>
</div>

2
  • Neste caso as divs que você está adicionando estão ficando dentro da div placeholder, elas tem que ficar fora. A resposta do @Pedro ficou mais simples. Obrigado mesmo assim! :D
    – Russ_AB
    Commented 25/11/2015 às 13:09
  • É verdade, a resposta do @PedroCamaraJunior é melhor neste caso. :) Commented 25/11/2015 às 13:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .