Jquery Append Button Inside Div

Question

I have this block of codes :

<div class="services">
    <div class="grid grid-pad">

        <?php
        query_posts(array('post_type' => 'services', 'posts_per_page' => -1));

        while (have_posts()) : the_post();
            ?> 

            <div class="col-1-3 tri-clear">
                <div class="single-service">
                    <i class="fa <?php echo types_render_field("icon", array("output" => "raw")); ?> service-icon"></i>
                    <?php the_title('<h3 class="service-title">', '</h3>'); ?>
                    <?php the_content('<p>', '</p>'); ?>
                </div>
            </div>

        <?php endwhile; ?> 

        <!-- how to add button here? -->

    </div> 
</div>

I want to add <button>Contact Us</button> there (place I marked). for a reason I cannot edit the source code, but I can add custom javascript (using jQuery) to add the button. How to achieve it?

Thanks for your advise.

Answer 1

Try this code:

jQuery('.services .grid.grid-pad').append('<button>Contact us</button>');

Answer 2

use .append on the parent. this will add it as a last child.

$('.grid-pad').append('<button>Contact Us</button>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="services">
  <div class="grid grid-pad">


    <div class="col-1-3 tri-clear">
      <div class="single-service">
        <i class="fa service-icon"></i>
      </div>
    </div>
    
    <div class="col-1-3 tri-clear">
      <div class="single-service">
        <i class="fa service-icon"></i>
      </div>
    </div>
    
    <div class="col-1-3 tri-clear">
      <div class="single-service">
        <i class="fa service-icon"></i>
      </div>
    </div>

    <!-- how to add button here? -->

  </div>
</div>