jQuery append if doesn't exist

Question

I would like to append a div only if it\'s not already there. I am trying with this but it doesn\'t work:

$(\'#method_id\').on(\'change\', funct         


        

Answer 1

In order to check if an element exists, you need to find a selector that matches only that element and check if the length of the jQuery object is equal to 0 or not, like so:

if ($('#unique-selector').length === 0) {
    // code to run if it isn't there
}
else {
    // code to run if it is there
}

Answer 2

As you are appending div with id, you could just search if that div exists by calling :

if($("#warning_message").length > 0 ){
   $('.form-group').find('#column_message>.alert').remove();
}else{
   $('#column_message').append('<div id="warning_message" class="alert alert-danger"><strong>Warning!</strong> Installed column and method do not match</div>');
}

But if you would like to have more divs of alert, you could just search for class "alert" or so.

Another way without id ( probably better ) would be to use children() method

Answer 3

the inner if should be if ($('#column_message').next('div').length===0) or if(!$('#column_message').next('div').length)