getElement(s)系で対象の要素がない場合の返り値

12月にも関わらず未だコートを出していないyukiinu2ndです。
12月も半ばになりますが、本当に冬とは思えない暖かさですね。
今回もJavaScriptネタです。

要素の有無をチェックし、あれば作成した要素を差し込む、ということをしようとしていました。

//要素を作る
var elem = document.createElement("div");
elem.id = "test";
//差し込み先の取得
var targetElem = document.getElementById("targetdiv");
//要素があれば差し込む
if(typeof targetElem != "undefined"){
	targetElem.appendChild(elem);
}

ところが、これはうまく動きません……。
要素がないにも関わらず、要素の有無を確認しているifの条件を満たしてしまいます。
原因は要素が無い時の返り値が「null」であることです。
このnullですが、undefinedとは別物です。
ちなみに、いずれもif内部で評価するとfalseとなります。
つまり、わざわざtypeofで調べたり、nullであることを確認する必要はありません。

//要素を作る
var elem = document.createElement("div");
elem.id = "test";
//差し込み先の取得
var targetElem = document.getElementById("targetdiv");
//要素があれば差し込む
if(targetElem){
	targetElem.appendChild(elem);
}

undefinedが返ってくると思い込んでいたので、ちょっと悩んでしまいました。
でも、これで解決です。ちゃんと動きます。

参考にしたURL

下記URLにnullやundefined等の判定について詳しく書かれています。
今回引っかかった際に参考になりました。ありがとうございました。
http://d.hatena.ne.jp/unageanu/20070705