innerHTML をうまく扱えない

Question

<script>
	document.getElementById("text").innerHTML ="<h1>hello</h1>";
</script>
						
<div id=”text”></div>

というコードを書いたのですが、<div id=”text”></div> 内にhello という文字がh1タグで出力されません。
どうすればいいですか？

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

Answer 1

実際にどのように書いているのか、わかりませんが、考えられる可能性は2つ。

• <div id=” text”></div>という行で、idの中に空白スペースがある。

• <script></script>のブロックが<div>のブロックの上にあるので下にする

Comments

[ryo-dev]

ありがとうございます。

Answer 2

<div id=”text”></div> の ” が全角です。また、<script> は </div> より後においてください。

Comments

[ryo-dev]

ありがとうございます。

Answer 3

他の回答者様の仰る通り<script></script>は<div></div>の下に書くべきだと思いますが、もし場所を気にせずに記述したければ、loadイベントを使いましょう。

以下html内に<div id="text"></div>があることが保証されているものとします。<script></script>内ならどこに書いてもかまいません。

window.addEventListener("load",function(){
  document.getElementById("text").innerHTML ="<h1>hello</h1>";
},false);

jQueryが使える場合は

$(function(){
  $("#text").html("<h1>hello</h1>");
});

でもいいみたいです。

##追記
前回の質問で使われておりましたね。
チェックが入った時に処理

これに合わせるならばこの質問中のdocument.write("<h1>Hello World!!</h1>");を$("#text").html("<h1>Hello World!!</h1>");に変えるだけで構いません。

Comments

[ryo-dev]

jQueryが使える場合の回答はloadを使わなくても、使ったかのようになり、<div></div>の下に書かなくてもよくなるのですか？

[namnium1125]

その通りです。ただし上記のように`$(function(){});`の中に含める必要があります。

[ryo-dev]

なるほど！
ありがとうございます。