IEがpタグにinnerHTMLできないのはバグ?


<p> タグの中に innerHTML プロパティを使って文字列を挿入するときに、それが不正なHTMLだとIEは無視してしまう。

Pieces Of Rakesh: IE’s Unknown Runtime Error When Using innerHTML

http://piecesofrakesh.blogspot.com/2007/02/ies-unknown-runtime-error-when-using.html

IE で innerHTML に変な HTML を入れるとエラーになる件 – *Trace Output*

http://d.hatena.ne.jp/miyamuko/20060320/p1

単純な文字列ならば問題ない。例えば次の文はちゃんと動くが、

document.getElementById( "some-id" ).innerHTML = "あいう<br />えお";

次の文はエラーになってしまう。なんというわかりにくさ。

document.getElementById( "some-id" ).innerHTML = "<div>あいうえお</div>";

もっとも、<p> タグの中にブロックレベル要素を入れてはいけない」というのは HTML の解説書には必ず書いてある決まり事ではある。Firefox や Google Chrome では問題ないのに、IE だけが規則に厳格なんて珍しいこともあるものだ。

以下はおまけ。

これを知ったのは、このブログのコメントができなくなっていた件について調べた時であったのだが、ついでだからメモ代わりにその過程を書いておく。

そもそもコメントにおける Captcha 画像がどのようにして表示されるのかというと、

  • コメント欄にフォーカスする
  • mtCommentFormOnFocus() という関数が呼び出される
  • 更に mtShowCaptcha() という関数に飛ぶ
  • comments-open-captcha」という id の付いたタグに Captcha 画像を表示するコードを挿入する

という手順になっている。問題は太字にした部分で、ここは HTML ソースを見ると次のようになっていた。

<p id="comments-open-captcha"></p>

これが間違いだった。テンプレートを書き換えて <div> タグにするだけで万事解決。

<div id="comments-open-captcha"></div>

いらんことで苦労したが、mt.js の勉強ができたから良しとするか。

コメントを残す