- ベストアンサー
head内でJavaScriptを実行する方法は？
- headタグ内でJavaScriptを実行する際には、エラーが発生することがあります。
- body直前にスクリプトを配置すれば正常に動作しますが、head内で実行する方法を知りたいです。
- 特定のidを持つ要素にスクリプトで生成した要素を追加することが目標です。
- JavaScript
- 回答数3
- ありがとう数14
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ins( 'here' ); をオンロードイベントで実行すれば動作します。 <html> <head> <script> function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = '<p>content</p>'; var element = document.getElementById( id ); element.appendChild( output ); } window.onload = function() { ins( 'here' ); } </script> </head> <body> <div id="here"></div> </body> </html>
その他の回答 (2)
- t_ohta
- ベストアンサー率38% (5292/13826)
＞ オンロードイベントで確かに動作しましたが、エラーは消えませんでした。 私の手元ではエラーが出ません。 プログラムのどこかに、オンロードイベントに入れてない「ins( 'here' );」が残っていませんか？
お礼
別に重複する箇所があったので削除したところ動作しました。 ただ、このままだと関数を使って2つ以上要素を追加しようとしても、一番最後に呼び出したものに上書きされてしまうのですね…。 この関数を複数箇所で利用したいので、一先ずこちらの質問は締め切ってまた別の質問として投稿させて頂こうと思います。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
div＞span＞pとブロックレベルとインラインがぐちゃぐちゃなので 全部ブロックで表示すればわかりやすいかと あと、innerHTMLでなくきちんと書いた方がよいかも classNameが古いIEのバグでsetAttributeできないので どうしてもclassNameを直接いじる必要があるのは残念ですけどね <html> <head> <script> function func_ins( id ) { var output = document.createElement('span'); output.className = 'ins'; var p=document.createElement('p'); p.appendChild(document.createTextNode('content')); output.appendChild(p); var element = document.getElementById( id ); element.appendChild(output); } window.onload=function(){func_ins( 'here' )} </script> <style> div#here{width:80%;background-Color:yellow;} div#here span.ins{display:block;width:60%;background-Color:aqua;} div#here span.ins p{width:40%;background-Color:lime;} </style> </head> <body> test1 <div id="here"></div> test2 </body> </html>
お礼
古いIEへの対応などはあまり考えていなかったので参考になりました。 ありがとうございました。
補足
回答ありがとうございます。 短く書くためにinnerHTMLの内容を<p>content</p>としましたが、ここに追加する内容はp要素に限定するものではなく、スクリプトなども追加する事を考えているのでinnerHTMLにしています。 説明不足で申し訳ないです。 classNameについては目印程度の意味合いで付けているので無くても大丈夫なのですが、付けない方が良いでしょうか…？
お礼
こちらの内容で動作が確認出来たので、ベストアンサーとさせて頂きます。 ありがとうございました。
補足
回答ありがとうございます。 オンロードイベントで確かに動作しましたが、エラーは消えませんでした。 element.appendChild( output ); Uncaught TypeError: Cannot read property 'appendChild' of null このエラーを解消する形で動作させたいのですが、可能でしょうか…？