jQueryでinnerHTML

jQueryを使ってweb上の要素を拾得して変更したり、拾得したりする場面が多く存在します。
今回はJavaScriptのinnerHTMLをjQueryで使用する方法です。

document.getElementById("box").innerHTML = "テキスト"

$("#box").html('テキスト');

IDがboxの要素を書き換える動作は
上記のinnerHTMLとhtml()は同じです。

IDと違い、classで使用する場合、JavaScriptだとfor文で総当たりをしていかなければなりません。

$(".class").html("テキスト");

var hoge = document.getElementsByClassName("class");
for (var i = 0; i < hoge.length; i++) {
    hoge[i].innerHTML = "テキスト";
}

上記では下記替えましたが

拾得する場合には

■IDの場合

$("#box").html();

document.getElementById("#box").innerHTML;

■classの場合
$(“.box”).eq(1).html();

document.getElementsByClassName(“box”)[0].innerHTML;

順番は「0」から始まります、[0]だと一番最初の.box要素で[1]が二番目の.box要素を拾得することになります。