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/

do not use document.getElementById and $('#...') in the same block of code, it gets confusing — axl g, Jul 30 '12 at 09:30
possible duplicate of [Is there an "exists" function for jQuery](http://stackoverflow.com/questions/31044/is-there-an-exists-function-for-jquery) — Felix Kling, Jul 30 '12 at 09:51
FWIW, your fiddle does not work because you have a syntax error: `Uncaught SyntaxError: Unexpected token < `. Once you fixed that, your code works: http://jsfiddle.net/fkling/86kH4/28/ — Felix Kling, Jul 30 '12 at 09:54

Nope · Answer 1 · 2012-07-30T10:50:41.167

2

Replace

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

with

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

edited Jul 30 '12 at 10:50

answered Jul 30 '12 at 09:43

Nope

22,147
7
47
72

`header` is a variable in the OPs code, your jQuery code is not equivalent. – Felix Kling Jul 30 '12 at 09:57
@FelixKling: Thanks for pointing that out. Given the header variable contains the element id, simply concatonating the `#` with the variable should be fine. I updated the answer to reflect that. – Nope Jul 30 '12 at 10:51

score 0 · Answer 2 · answered Jul 30 '12 at 09:30

0

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 */
}

answered Jul 30 '12 at 09:30

zessx

68,042
28
135
158

Ok, then you know what changes to do ;) Avoid using the jQuery selector as mentionned in the other answer, the result will be an empty array. The basic javascript way is really more safe. – zessx Jul 30 '12 at 09:38

Dmitry Bolyukh · Answer 3 · 2012-07-30T11:36:52.190

0

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

edited Jul 30 '12 at 11:36

answered Jul 30 '12 at 09:46

Dmitry Bolyukh

1
1

Please include code snippets in the body of the answer as well as via link to JSFiddle. – Jul 30 '12 at 11:28

score 0 · Answer 4 · edited Jul 30 '12 at 09:56

0

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~~~

edited Jul 30 '12 at 09:56

Felix Kling

795,719
175
1,089
1,143

answered Jul 30 '12 at 09:51

xiaohigh

26
3

`.live` is for binding event handlers (and it's deprecated), but you don't bind any... it's useless calling it here. – Felix Kling Jul 30 '12 at 09:56

score 0 · Answer 5 · answered Jul 30 '12 at 10:02

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

score -1 · Answer 6 · answered Jul 30 '12 at 09:33

-1

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.

answered Jul 30 '12 at 09:33

Shreedhar

5,502
3
22
27

it wont be undefined - it will return an empty array – Jibi Abraham Jul 30 '12 at 09:36
@JibiAbraham it wont return empty array, it returns null in both chrome and firefox :P – Shreedhar Jul 30 '12 at 09:40
@shreedhar No it won't. Just tried it in Chrome and it returns an empty array. Just use `if($('#header').length)` http://jsfiddle.net/mMYcz/1/ – Thomas Jul 30 '12 at 09:43
1

jQuery **always** returns a jQuery object, even if no elements have been selected. – Felix Kling Jul 30 '12 at 09:52

How to detect the existence of an element in javascript?

6 Answers6