Check if element exists within DIV

Question

I want to, on click, move an element inside a div unless it's already inside it. I was thinking something like...

Click tag > If element is in div do nothing > Else move element into div

http://jsfiddle.net/establish/Xhhe8/

HTML

<ul>
  <li><a href="#" class="tag">Art</a></li>
  <li><a href="#" class="tag">Computing</a></li>
  <li><a href="#" class="tag">Design</a></li>
</ul>

<div id="crate">
</div>

jQuery

$('.tag').on('click', function(event) {

if ($('#crate').has(this)) {
    // do nothing
}

else {

    $(this).appendTo('#crate');
}
});

It doesn't work. Also not sure how to represent 'do nothing', usually I just use a singular IF statement so no need to represent it. Can I do this to 'do nothing' and disable the click?

$(this).off(); 

Answer 1

This should do it..

$('.tag').on('click', function(event) {

    var self = $(this);
    if (self.closest('#crate').length) {
        // do nothing
    }
    else {
        self.appendTo('#crate');
    }

});

Answer 2

Gaby's answer will work, but I'd prefer structuring it without the empty if block like this:

$('.tag').on('click', function(event) {
    var self = $(this);
    if (self.closest('#crate').length == 0) {
        self.appendTo('#crate');
    }
});