Question

I made a very simple button click event handler, I would like to have <p> element be appended when button clicked, you can check my code here:

<div id="wrapper">
    <input id="search_btn" value="Search" type="button">
</div>

$("#search_btn").click(function(){
    $("#wrapper").append("<p id='other'>I am here</p>");
});

I have two questions to ask:

1, why my .append() does not work as I expected (that’s append the <p> element)

2. in jQuery, how to check if some element is already appended? For example how to check if <p id="other"> has already appended in my case?

——————– update ——————————————-

Please check my updated code here.

So, only the 2nd question remains…

Answer 1

1. You are using mootools and not jQuery.

2. To check if your element exists

if($('#other').length > 0)

So if you do not want to append the element twice:

$("#search_btn").click(function() {
    if($('#other').length == 0) {
        $("#wrapper").append("<p id='other'>I am here</p>");
    }
});

Or, you can use the .one(function)[doc]:

$("#search_btn").one('click', function() {
    $("#wrapper").append("<p id='other'>I am here</p>");
});