Hatena::Groupsubtech

ういはるかぜの化学

Friday, September 12, 2008

IEでp要素の中にp、div要素などを挿入してからそれのinnerHTMLプロパティをセットしようとすると「未知の実行時エラーです。」が発生する 15:06  IEでp要素の中にp、div要素などを挿入してからそれのinnerHTMLプロパティをセットしようとすると「未知の実行時エラーです。」が発生する - ういはるかぜの化学 を含むブックマーク はてなブックマーク -  IEでp要素の中にp、div要素などを挿入してからそれのinnerHTMLプロパティをセットしようとすると「未知の実行時エラーです。」が発生する - ういはるかぜの化学

p要素の中にdiv要素ははいらねーよばーかばーか!というのは百も承知ですがそうせざるを得ない場面もあるのです。

で、まあ、タイトルの通り以下のようなコードで再現できます。

<title>「未知の実行時エラーです。」</title>
<body>

<p id="box1"></p>

<script type="text/javascript">
var box1 = document.getElementById('box1');
var placeHolder = document.createElement('div');
box1.appendChild(placeHolder);
placeHolder.innerHTML = 'foobar'; // ここで「未知の実行時エラーです。」が発生する。
</script>

</body>

解決策はdiv要素をp要素にappendChildする前にinnerHTMLプロパティをセットするか、要素をさらにもう一個作ってそのinnerHTMLに入れて、それをdiv要素にappendChildするという方法があります。

<title>「未知の実行時エラーです。」回避策</title>
<body>

<p id="box1"></p>

<script type="text/javascript">
var box1 = document.getElementById('box1');
var placeHolder = document.createElement('p');
box1.appendChild(placeHolder);

var tmpDiv = document.createElement('div'); // 一度別な要素にセットしてappendChildする
tmpDiv.innerHTML = 'foobar';
placeHolder.appendChild(tmpDiv);
</script>

</body>
トラックバック - http://subtech.g.hatena.ne.jp/mayuki/20080912