Add element after another with jQuery

Navigation
0

How can I add another <li> ... </li> tag after the last one with Jquery ? I have installed a plugin "Jquery Custom", and would do it there. 

<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>
    
asked by anonymous 10.04.2018 / 23:11

2 answers

1

One of the solutions will be to use Jquery's .append () function.

Example with your code: 

$('.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' is the container where you want to add and what is inside the parenthesis is the content that will be added. (attention to quotation marks and quotes)

append always adds to the end of the container.

Greetings

    
10.04.2018 / 23:59
2

Well, I did so using .insertAfter () .

Example: 

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><divclass="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>
    
10.04.2018 / 23:32
How to do? php echo $ i? be random between Y and X? NullPointerException error in execution