appendChild()メソッド

appendChild()メソッドを使っても
「main.js:164 Uncaught TypeError: Cannot read property 'appendChild' of null」
というエラーが出てきてしまいます。
そもそもなんでpropertyと言われているのかがわからないですが、これはどういうエラーなのでしょうか。

↓HTML部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
    	<meta http-equiv="Content-Script-Type" content="text/javascript">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
        
        
        <script src="main.js"></script>

        
        
    </head>
    <body>
       
    
        
<h2 id="kantan">おはよう</h2>
        
        
    </body>
</html>

↓javascript部分(main.js)

var s = new String("test");
String.prototype.toUpperCase = function(){
	return this.valueOf() + "!!";
}

document.getElementById("kantan").appendChild(s.toUpperCase());

kei344

2016/06/19 03:48

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

行動規範の内容に同意します

回答3件

まず、他の回答者様の言うように、DOM解決の順序の問題で、document.getElementById("kantan")が呼ばれる時点でkantanはまだ読み込まれていないためエラーになります。
そこで役に立つのがjQueryの$(function(){})という記述です。これで囲むとそのコードはDOM解決後に実行されます。中身的にはwindow.onloadに近い動作になります。
そして、あなたはStringを直接appendChildしようとしていますが、appendChildできるのはNode型です。StringはNodeではないため、document.createTextNode等でStringからNodeに変えてやる必要があります。

###Before
https://jsfiddle.net/7d77ue45/

###After
https://jsfiddle.net/7d77ue45/2/

###おまけ
jQuery.appendを使うともっと簡単にテキストを追加できます。
https://jsfiddle.net/7d77ue45/1/

投稿2016/06/19 04:22

masaya_ohashi

総合スコア9206

main.jsが読み込まれ、document.getElementById("kantan")が実行された時には<h2 id="kantan">おはよう</h2>がまだ読みこまれていませんので、nullが返ってきてエラーになります。
ですので、main.jsを<h2 id="kantan">おはよう</h2>の後に読み込めば解決すると思います。

投稿2016/06/19 03:17

Lhankor_Mhy

総合スコア36074

ora.

2016/06/19 04:20

ご回答いただきありがとうございます。原因は回答者様に指摘いただいた点でした。　加えておをらく、appendChild()メソッドの引数に、”text!!”(==s.toUpperCase)をだけを入れたのも駄目なようでした。要素を引数にするものなので

行動規範の内容に同意します

本件とは関係有りませんが、toUpperCase を上書きされていますが、そういった使い方はメンテナンス性が下がるのでお勧めしません。また上書きされる関係上、「UpperCase」処理は行われません。

JavaScript
1String.prototype.myOwnToUpperCase = function(){
2	return this.valueOf().toUpperCase() + "!!";
3}
4var s = 'test';
5document.getElementById( 'kantan' ).insertAdjacentHTML( 'beforeend', s.myOwnToUpperCase() );