jQuery append after the button

Question

Following were my HTML:

<div class="row attachments-container">
    <div class="row">
        <div class="col-4 row-space-2 h5 invisible" id="js-first-photo-text">
            Your first photo appears in search results!
        </div>
    </div>
    <% if !@product.new_record? %>
        <% @product.product_attachments.each do |attachment| %>
            <div class="col-xs-6 col-md-4 form-group grayscale">
                <img src="<%= attachment.attachment.small.url %>" class="upload-photo-image">
                <input type="hidden" name="product_attachment[id][]" value="<%= attachment.id %>">
                <button class="delete-photo-btn overlay-btn js-delete-photo-btn delete-attachment" data-photo-id="143275119">
                    <i class="fa fa-trash-o"></i>
                </button>
                <button class="cover-photo-btn cover-overlay-btn js-delete-photo-btn cover-attachment" data-photo-id="143275119">
                    <i class="fa fa-picture-o"></i>
                </button>

            </div>
        <% end %>
    <% end %>

    <div class="col-xs-6 col-md-4 form-group">
        <div class="thumbnail panel photo-item empty-photo-frame" name="empty-photo-frame">
            <img src="<%= asset_url('add-image-placeholder.png') %>">
        </div>
    </div>

</div>

When the user decide to change cover following onClick will trigger:

$('.attachments-container').on('click', '.cover-attachment', function (event) {
    $this = $(this);
    var append_html = '<p class="status-notice">Saving as cover....</p>';
    $this.find('.cover-attachment').append_html

    var attachment_id = $(this).parent().find('input[name="product_attachment[id][]"]').val();
    $.ajax({
        type: "POST",
        url: "/product_attachments/" + attachment_id + "/set_cover",
        dataType: "json",
        data: {
            'attachment_id': attachment_id
        },
        complete: function (data) {
            $this.parent().find('.status-notice').text('Saved!').fadeOut('slow');
            console.log(data)
        }
    });
    event.preventDefault();
})

The problem is, the status-notice is not appended after the cover-attachment button.

Answer 1

Problem:

The problem is in the following statement

$this.find('.cover-attachment').append_html

this will return undefined as there is no method/property name append_html on jQuery.

---

Solution:

Jquery append after the button

To append HTML, you can use append() .

$this.find('.cover-attachment').append(append_html);

To completely replace/overwrite the HTML of element use html() .

$this.find('.cover-attachment').html(append_html);

Jquery append after the button

To add new element after another, use after()

$this.find('.cover-attachment').after(append_html);