JavaScriptでHTMLを書き換える

JavascriptとJQueryの混同

JavaScriptで要素を取得して中身を書き換えようとしたとき、JavaScriptとJQueryが混同して、はまってしまった。

html

<div id="hoge"></div>

混同

var hoge = $("#hoge");
var str = "hogehoge"
hoge.innerHTML = str;

var hoge = $("hoge")は、JQueryで要素を指定して、中身を取得している。
hoge.innerHTML = strのinnerHTMLは、javascriptのメソッド。
この方法では、書き換えられない。

書き換えるなら

JQueryバージョン

var hoge = $("#hoge");
var str = "hogehoge"
hoge.html(str);

もしくは、

javascriptバージョン

var hoge = document.getElementById("hoge");
var str = "hogehoge"
hoge.innerHTML = str;

で書き換えられる。