スポンサーリンク

JavaScriptの動かないコード (中級編) innerHTMLに閉じタグを書き込む時のエラー


以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)


やりたい事:
 innerHTMLに「終了タグ」と「開始タグ」を書き込むことにより,元からあったタグを2分割する。

<div id="div0">
	<div id="div1">
		分割前
	</div>
</div>
<input type="button" value="divを分割して2つに" onClick="f()">

<script language="JavaScript">

function f()
{
	// タグを2つに分割する。
	div1.innerHTML = '分割後1</div><div id="div2">分割後2';
	
	// 「分割後1」と表示
	alert( div1.innerHTML );
}

</script>



答え



Firefoxでは

分割後1
<div id="div2">分割後2</div>

IEでは

分割後1<div></div>
<div id="div2">分割後2</div>

と表示され,いずれもタグの分割に失敗する。


ページにHTMLデータを出力する
http://www.openspc2.org/reibun/JavaSc...

innerHTMLプロパティにHTMLタグを含むデータを書き込むと、・・・書き込むタグが閉じられていない場合には強制的に閉じタグが付加されます。

とある。上の例では,div2について開始タグのみが書き込まれたので,innerHTML終端に閉じタグが強制付加されている。


逆に,div1のように「閉じるだけで開始がない」という場合,

  • IEでは,閉じタグの直前に開始タグを強制付加する。
  • FFでは,閉じタグを無視する。

という挙動になり,相違が発生するようだ。どちらのブラウザも,DOM構造を無理やり保とうという努力をしている。

※もっとも,IEでDOM構造が崩壊する例は例えば2つある。

p要素への appendChild() で失敗する
http://language-and-engineering.hatenablog.jp/entry/20080831/1220189470

selectの中味を書き換えるときのエラー
http://language-and-engineering.hatenablog.jp/entry/20080918/1221699994

改善策としては,無精な事はせず,普通にDOM要素を作りappendChild()する事になるだろう。

innerHTML関連でのエラー+ブラウザ相違は多い。