引数のある関数をhtml読み込み後に実行

解決済

質問者：mi-chika
質問日時：2015/01/05 17:29
回答数：3件

次のhtmlとスクリプトでresultのような結果を得たいのですが、スクリプトがheadにあるとエラーが出てしまいます。
body直前にスクリプトを置けば動作はするのですが、head内で動作させるにはどうしたら良いのでしょうか？

[html]
<div id="here"></div>

[JavaScript]
function ins( id ) {
var output = document.createElement( 'span' );
output.className = 'ins';
output.innerHTML = '<p>content</p>';
var element = document.getElementById( id );
element.appendChild( output );
}

ins( 'here' );

[result]
<div id="here">
<span>
<p>content</p>
</span>
</div>

よろしければどなたかアドバイスを頂けると助かります。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： t_ohta
回答日時：2015/01/06 09:28

＞　オンロードイベントで確かに動作しましたが、エラーは消えませんでした。

私の手元ではエラーが出ません。
プログラムのどこかに、オンロードイベントに入れてない「ins( 'here' );」が残っていませんか？

- 0
- 件

通報する

この回答へのお礼

別に重複する箇所があったので削除したところ動作しました。
ただ、このままだと関数を使って2つ以上要素を追加しようとしても、一番最後に呼び出したものに上書きされてしまうのですね…。

この関数を複数箇所で利用したいので、一先ずこちらの質問は締め切ってまた別の質問として投稿させて頂こうと思います。
ありがとうございました。

通報する

お礼日時：2015/01/06 15:43

No.2

回答者： yambejp
回答日時：2015/01/05 18:17

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>

この回答への補足

回答ありがとうございます。
短く書くためにinnerHTMLの内容を<p>content</p>としましたが、ここに追加する内容はp要素に限定するものではなく、スクリプトなども追加する事を考えているのでinnerHTMLにしています。
説明不足で申し訳ないです。

classNameについては目印程度の意味合いで付けているので無くても大丈夫なのですが、付けない方が良いでしょうか…？

補足日時：2015/01/05 18:43

通報する

- 0
- 件

通報する

この回答へのお礼

古いIEへの対応などはあまり考えていなかったので参考になりました。
ありがとうございました。

通報する

お礼日時：2015/01/06 15:46

No.1ベストアンサー

回答者： t_ohta
回答日時：2015/01/05 17:49

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>

この回答への補足

回答ありがとうございます。
オンロードイベントで確かに動作しましたが、エラーは消えませんでした。

element.appendChild( output );
Uncaught TypeError: Cannot read property 'appendChild' of null

このエラーを解消する形で動作させたいのですが、可能でしょうか…？

補足日時：2015/01/05 18:33

通報する