How to detect the existence of an element in javascript?

Question

var newHead = '<div id="head'+text+'"></div>';
var header = "head"+text;
if (document.getElementById(header) == undefined) {
        //alert(document.getElementById("head"+text));
        $("#result-job").append(newHead);
        var result = '<div id="div' + dataSplit[0] + '"><input type="radio" checked="checked" class="choosenJob" name="rdb_job" value="' + dataSplit[0] + '" id="' + dataSplit[0] + '" /><label for="' + dataSplit[0] + '">' + dataSplit[1] + '</label><br /></div>';
        $("div#" + header).append(result);
    } else {
        var result = '<div id="div' + dataSplit[0] + '"><input type="radio" checked="checked" class="choosenJob" name="rdb_job" value="' + dataSplit[0] + '" id="' + dataSplit[0] + '" /><label for="' + dataSplit[0] + '">' + dataSplit[1] + '</label><br /></div>';
        $("div#" + header).append(result);
    }

Can those script run well ? I want add some new element(div) in the result div but my script didnt work

fiddle simulation: http://jsfiddle.net/86kH4/5/

Answer 1

Replace

if (document.getElementById(header) == undefined) {

with

if ($("#" + header).length == 0) {

Answer 2

You must add some quotes around your id, and it'll works fine. Also, remove the == undefined, let just Javascript check it :

if (document.getElementById("header")) {
   /* treatment */
} else {
   /* treatment */
}

Answer 3

here you should use a jquery function "live" for example:

$("div#" + header).live().append(result);

this function is used when the element was added appending the created elements~~ hope it is useful~~~

Answer 4

As I mentioned in my comment, your fiddle has a syntax error, that's why it "does not work". Once you fixed the error, you get the expected behaviour: http://jsfiddle.net/fkling/86kH4/28/.

---

Yes, you can use

document.getElementById(header) == undefined

to test whether an element with the ID contain in header exists or not.

If no such element exists, getElementById will return null and null == undefined is true. With that in mind, it would be even more correct if you were comparing against null:

document.getElementById(header) === null

---

That said, since you are using jQuery, I would try to be consistent and not mixing it with plain DOM methods. Every jQuery object has a length property containing the number of selected elements. So the jQuery equivalent would be:

$('#' + header).length === 0

Answer 5

http://jsfiddle.net/Q98mv/ - Please compare your snippet with this one and you will find where problem was

$('#chk1').click(function(){
    var ada = "asd";  //ada here will be my dynamic parameters                 
    var neww= '<div id="baru'+ada+'"></div>';

    if($('#baru'+ada).length==0){
        $("#asd").append(neww);
    }else{
        $("#baru"+ada).append("Hellow<br>");
    }
})​;

Answer 6

replace this if (document.getElementById(header) == undefined) { with if ($('#header') == undefined) { it may work fine. by the way you missed quotes for header in your code.