Appending a hyperlink

Question

I'm working from this: http://tympanus.net/codrops/2011/09/20/responsive-image-gallery/

I've managed to append two more things into the gallery from es-gallery (AKA Elastislide), but I can't append an active link or add-to-cart button.

<li><a href="#"><img src="images/envtab.png" data-large="images/cards.jpg" data-description="this is the caption"  data-bit="images/env.png"> data-cart="???" data-link="????"</a></li>

/* shows the large image that is associated to the $item*/

            **var $loader   = $rgGallery.find('div.rg-loading').show();

            $items.removeClass('selected');
            $item.addClass('selected');

            var $thumb      = $item.find('img'),
                largesrc    = $thumb.data('large'),
                title       = $thumb.data('description');
                button      = $thumb.data('cart');
                key     = $thumb.data('bit');
            $('<img/>').load( function() {

                $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
                $rgGallery.find('div.rg-button').empty().append('<img src="' + button + '"/>'); 
                $rgGallery.find('div.rg-key').empty().append('<img src="' + key + '"/>');   
                if( title )
                    $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );**

            if( title )
                $loader.hide();
                if( mode === 'carousel' ) {
                    $esCarousel.elastislide( 'reload' );
                    $esCarousel.elastislide( 'setCurrent', current );
                }

                anim    = false;                    
            }).attr( 'src', largesrc );

        },
        addItems        = function( $new ) {

            $esCarousel.find('ul').append($new);
            $items      = $items.add( $($new) );
            itemsCount  = $items.length; 
            $esCarousel.elastislide( 'add', $new );

        };

    return { 
        init        : init,
        addItems    : addItems
    };

})();

Gallery.init();

I don't know the syntax for putting the href items into the HTML or how to append with the gallery js.

To get the appended in line rather than stacked would be a bonus too, I've tried after, prepend and before to no avail.

Thanks.

Answer 1

The syntax for appending a href with a is:

$('<a />').attr('href','url here').appendTo($('the container'));

That is how you append a <a> with a href