Moving html content around the DOM with jquery

Question

I want to load the contents of the gallery element to the stage element by clicking on the gallery element itself. This is noob stuff I'm sure, but I have yet to find an explanation for this. Why doesn't this work?

Also, I am using jquery UI to create a drag and drop interface --> the element inside the #gallery is draggable, and #gallery is droppable

$(document).ready(function () {
    var $galcon = $('#gallery').html();
    $("#gallery").on('click'function () {
        $('#stage').append($galcon);
    });
});

Answer 1

Reference the actual node child and not just the html. In other words, remove the ".html()"

$(document).ready(function () {
    var $galcon = $('#gallery');
    $("#gallery").on('click'function () {
        $('#stage').append($galcon);
    });
});

Answer 2

Try replacing var $galcon = $('#gallery').html() with var $galcon = $('#gallery').text() . Hope this helps!

Answer 3

Are you getting an error in the dev console? Is this the exact code you're running? You need a comma after 'click':

$("#gallery").on('click', function () {
    $('#stage').append($galcon);
});