Edited at

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 = strinnerHTMLは、javascriptのメソッド。

この方法では、書き換えられない。


書き換えるなら


JQueryバージョン

var hoge = $("#hoge");

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

もしくは、


javascriptバージョン

var hoge = document.getElementById("hoge");

var str = "hogehoge"
hoge.innerHTML = str;

で書き換えられる。