0

Como posso adicionar outra tag <li> ... </li> após a última com Jquery? Tenho instalado um plugin "Jquery Custom", e o faria por lá.

<div class="col-sm-5 col-md-5 social-media style-1">
   <h3 class="widget-title">Permaneça conectado</h3>
   <ul class="social-link">
      <li class="icon-facebook">
         <a target="_blank" href="https://www.facebook.com/">
            <i class="fa fa-facebook"></i>
         </a>
      </li>
      <li class="icon-instagram">
         <a target="_blank" href="https://www.instagram.com/">
            <i class="fa fa-instagram"></i>
         </a>
      </li>
      <li class="icon-google-plus">
         <a target="_blank" href="https://plus.google.com/communities/114812437665613081264">
            <i class="fa fa-flickr"></i>
         </a>
      </li>
  </ul>
</div>

2 Respostas 2

4

Bom, consegui assim, utilizando .insertAfter().

Exemplo:

jQuery(document).ready(function(){
  $('<li class="icon-youtube"><a target="_blank" href="https://www.youtube.com.br/"><i class="fa fa-youtube"></i>Inserido com jQuery</a></li>').insertAfter('li.icon-google-plus');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5 col-md-5 social-media style-1">
  <h3 class="widget-title">Permaneça conectado</h3>
  <ul class="social-link">
    <li class="icon-facebook">
      <a target="_blank" href="https://www.facebook.com/">
        <i class="fa fa-facebook"></i>
        1
      </a>
    </li>
    <li class="icon-instagram">
      <a target="_blank" href="https://www.instagram.com/">
        <i class="fa fa-instagram"></i>
        2
      </a>
    </li>
    <li class="icon-google-plus">
      <a target="_blank" href="https://plus.google.com/communities/114812437665613081264">
        <i class="fa fa-flickr"></i>
        3
      </a>
    </li>
  </ul>
</div>

1

Uma das soluções será utilizar a função .append() do Jquery.

Exemplo com o seu código:

$('.social-link').append('<li class="icon-facebook"><a target="_blank" href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a></li>');

'.social-link' é o container onde quer adicionar e o que está dentro do parentêsis é o conteúdo que vai ser adicionado. (atenção ás aspas e plicas)

O append adiciona sempre no fim do contentor.

Cumprimentos

1
  • Resolvi a situação com a ajuda de vocês, gratidão.
    – ElvisP
    Commented 12/04/2018 às 19:59

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 .