Add element after element with jQuery

Question

How can I add another tag <li> ... </li> after the last 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>

Answer 1

Well, I got it that way, 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>
<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>

Answer 2

One of the solutions will be to use the function .append() jquery.

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 parentheses is the content that will be added. (attention to quotation marks and quotation marks)

The append always add at the end of the container.

Regards