idとclass

通常HTMLとJavascriptの関係といえば、予めHTML要素としてidまたはclass属性を指定しておき、その属性に対してjavascript側からidやclassを指定して要素を特定しますが、jQueryを使うことによってidやclassを一切かかなくてもjavascriptで操作することが可能になるみたいです。

jQueryで要素を作成

よくある方法として、

<span class="synIdentifier">var</span> hoge = $(<span class="synStatement">document</span>.body).append(<span class="synConstant">'<div>test</div>'</span>);
Code language: JavaScript (javascript)

のようにして要素を追加をするやり方がありますが、これだとhogeには要素の追加先であるdocument.bodyの要素が参照されます。

しかしこれだと追加した要素を操作することができないためidかclass属性を使用するか $(“document.body:last”)というスマートじゃない方法を使用するしかないです。

これを解決するには、こうします。

<span class="synIdentifier">var</span> hoge = $(<span class="synConstant">'<div>test</div>'</span>);
$(<span class="synStatement">document</span>.body).append(hoge);
Code language: JavaScript (javascript)

やってることは上と一緒ですが、このやり方だとhogeにはjavascriptによって操作したい要素がそのまま参照されるので、このhogeを自由に書き換えることができます。しかも、javascriptで準備してから、appendで画面に表示ということができるので、準備時間があり、ローディング時において画面が瞬間的に点滅したり表示が崩れている様子を隠すこともできます。