- 締切済み
[JS] scriptノードの要素を動的に変更
テキスト型の変数textに格納されたJavaScriptを、 scriptタグを作ってそこに格納したく、以下のようにしてみましたが、 IE8でエラーになりました。FF10ではエラーにはなりませんでした。 方法１ var scriptNode = document.creatElement("script"); scriptNode.appendChild( document.createTextNode( text ) ); 方法2 var scriptNode = document.creatElement("script"); scriptNode.innerHTML = text; ※質問の意図は、単にtextに入っているスクリプトを実行したいわけではありません。 実行もしたいですが、指定された位置のscriptタグにtextのスクリプトを格納したいのです。
- palayo
- お礼率42% (84/198)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- Chaire
- ベストアンサー率60% (79/130)
HTML で <script ...>...</script> で表されるデータを script 要素と言い、<script ...> を script 要素の開始タグ、</script> を script 要素の終了タグと呼びます。HTML の基本用語と概念は大丈夫ですか。 HTML の script 要素を、DOM で表現したのが HTMLScriptElement です。 HTMLScriptElement は HTMLElement を継承します。HTMLElement は HTML の要素一般を抽象化したものであり、id、title、className といった全ての HTML 要素が持つべきプロパティがここで定義されます。 HTMLElement は Element を継承します。Element は HTML 要素のみならず、XML 一般の要素を抽象化したものです。tagName といったプロパティや、属性操作の setAttribute() と getAttribute() メソッドなどはここで定義されます。 さらに、Element は Node を継承します。Node は DOM 文書木を構成するノードを抽象化したものです。nodeType、nodeName、nodeValue、textContent といったプロパティや、appendChild()、removeChild() といった文書木操作メソッドはここで定義されます。 よって、HTML の script 要素は、Node を継承する Element を継承する HTMLElement を継承する HTMLScriptElement として DOM 文書木に現れるため、これらの持つプロパティ・メソッドを全て持っています。 DOM の基本概念ですので、覚えて下さい。 --- HTML の style 要素は、DOM の HTMLStyleElement で表されます。参照 URL を確認すればお分かりのように、text なんてプロパティは存在しません。 ただ、ややこしいことに、HTMLStyleElement は LinkStyle を実装しています（これは参照 URL からは分かりませんが、仕様書の本文を読めば書かれています）。つまり、HTMLStyleElement は sheet プロパティを持ち、ここから CSSOM 木にアクセスできます。ここで CSS 規則を挿入・削除すれば、ちゃんと反映されます。 HTMLStyleElement の textContent を直接書き換えられるかは、やや実装依存です。IE7 以下では style 要素の innerText/innerHTML は書き換えられません（どっちか一方か、両方かはド忘れました）。
- Chaire
- ベストアンサー率60% (79/130)
DOM Level 1 の HTMLScriptElement には text という書き込み可能なプロパティがあります。これは IE 4.0 の時代から存在し、セットしたスクリプトも動きます。 それぞれの要素（≠タグ）は、中身をどう扱うべきか「知って」います。例えば、script 要素なら中身をスクリプトコードとして扱わねばなりません。スクリプト言語の種類は type 属性が「知って」います。渡されたコードを適切に処理するために text という特殊プロパティがあります。 実際には汎用メソッドが特殊プロパティのショートカットになっている場合もあります。ですが、今回は script 要素に特有の操作なのですから、汎用的に書く必要はありません。まして、スクリプトコードなのに innerHTML に渡すのは意味的におかしいでしょう（まあ、IE 以外なら動きますけどね）。 そういうわけで、各インタフェースが持つメソッド・プロパティの意味を確認して下さい。
- utun01
- ベストアンサー率40% (110/270)
こんな感じでどうでしょう。 <html> <head> <title>テスト</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type='text/javascript'> var text = "alert('aaa');"; $(document).ready(function(){ $('body').append($("<script type='text/javascript'>"+text+"<\/script>")); }); </script> </head> <body> test </body> </html>
お礼
HTMLScriptElementというオブジェクトがあるんですね。 document.createElement("script") とした場合にもHTMLScriptElementとして作成されるのでしょうか。 scriptの場合には、別の方法でElementオブジェクトを作る必要があるのでしょうか。 また、styleタグの場合にもHTMLStyleElementがあるようですが、こちらもtextに入れれば反映されるのでしょうか。