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