0

html:

<ul>
  <li>1</li>
  <li>2</li>
  Adicionar aqui
  <li>5</li>
</ul>

Preciso adicionar duas li onde está escrito: "Adicionar aqui". Alguém sabe como fazer isso usando jQuery?

2 Respostas 2

1

Você pode utilizar o método "after" do jQuery. Exemplo:

$(document).ready(function() {
  var $li = $('ul li').eq(1);
  
  $('button').click(function() {
    $li.after('<li>' + $('ul li').length + '</li>');
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>5</li>
</ul>
<button>Adicionar</button>

1
  • Funcionou como esperado. Obrigado!
    – Enio
    Commented 6/04/2018 às 21:26
0

Você pode usar o pseudo seletor :nth-child() uma vez que você saiba a partir de qual "filho" você deseja inserir conteúdo.

$('ul > li:nth-child(2)').after(`
    <li>3</li>
    <li>4</li>
`)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>1</li>
  <li>2</li>
  <li>5</li>
</ul>

2
  • 1
    Aí vc está inserindo dentro da segunda <li> e não após.
    – Sam
    Commented 6/04/2018 às 21:25
  • Sim, esta errado o correto seria .after() Commented 6/04/2018 às 21:28

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 .