关于jQuery append（）以及如何检查元素是否已被追加

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>");
});

Answer 2

1) jsFiddle loads in MooTools by default, you need to include jQuery for this to work. There is not a reason in the world why that example wouldn't work. (Assuming that the $ is actually mapped to the jQuery object, that is.)

2) You can check the nextSibling of a DOMElement , or use the next() jQuery method, like so:

if(!$('#something').next().length) {
   //no next sibling.
}

Answer 3

检查元素是否已经附加：

alert($(this).parent().length?'appended':'not appended');

Answer 4

http://jsfiddle.net/j36ye/17/

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

Or

var other_appended = false;

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

Answer 5

How to check if an element exists:

if($("p#other").length > 0) {
    // a p element with id "other" exists
}
else {
    // a p element with id "other" does not exist
}

Answer 6

Your fiddle is using the moo tools framework. Change it to use the jquery framework on the left and it works. See http://jsfiddle.net/KxGsj/