JavaScriptを挿入する箇所について

2021年6月10日 17:54

JavaScriptの記述について

JavaScriptを記述する箇所については、headタグ内もしくはbodyタグ内です。（ものすごくざっくりいうとhtmlタグの直下以外ならばどこでもよい）
また、外部ファイルをscriptタグを使用し読み込むことも可能です。

▼headタグ内に記述する場合

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Test Page</title>
		<link rel="stylesheet" href="stylesheet.css">
		<script src="hoge.js"></script>
		<script>
			console.log("Hello World.");
		</script>
	</head>
	<body>
		<header></header>
		<p>サンプル</p>
		<footer></footer>
	</body>
</html>

▼bodyタグ内に記述する場合

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Test Page</title>
		<link rel="stylesheet" href="stylesheet.css">
	</head>
	<body>
		<header></header>
		<p>サンプル</p>
		<footer></footer>
		<script src="hoge.js"></script>
		<script>
			console.log("Hello World.");
		</script>
	</body>
</html>

注意点

処理する内容に考慮して記述する順番には気をつけましょう。

例）id="textarea"要素内の末尾（閉じタグの直前）に新しく作成した要素を挿入する

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Test Page</title>
		<link rel="stylesheet" href="stylesheet.css">
		<script src="hoge.js"></script>
	</head>
	<body>
		<header></header>
		<div id="textarea">
			<p>テキスト１</p>
			<p>テキスト２</p>
		</div>
		<footer></footer>
		<script>
			// id="textarea"を取得
			var textarea_element = document.getElementById('textarea');
			
			// 新しく要素を作成
			var new_element = document.createElement('p');
			new_element.textContent = '追加サンプルテキスト';
			
			// 指定した要素内の末尾に新規作成した要素を挿入する
			textbox_element.appendChild(new_element);
		</script>
	</body>
</html>

↓　フロントに出力されるイメージ（id="textarea"要素のみ抜粋）
JavaScriptの処理により新しい要素が追加された状態になる

<div id="textarea">
	<p>テキスト１</p>
	<p>テキスト２</p>
	<p>追記サンプルテキスト</p>
</div>

これを間違った状態にすると・・・

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>Test Page</title>
		<link rel="stylesheet" href="stylesheet.css">
		<script src="hoge.js"></script>
		<script>
			// id="textarea"を取得
			var textarea_element = document.getElementById('textarea');
			
			// 新しく要素を作成
			var new_element = document.createElement('p');
			new_element.textContent = '追加サンプルテキスト';
			
			// 指定した要素内の末尾に新規作成した要素を挿入する
			textbox_element.appendChild(new_element);
		</script>
	</head>
	<body>
		<header></header>
		<div id="textarea">
			<p>テキスト１</p>
			<p>テキスト２</p>
		</div>
		<footer></footer>
	</body>
</html>

何故間違っているのでしょうか？？
下記に注目してみましょう。

// id="textarea"を取得
var textarea_element = document.getElementById('textarea');

ソースコードは上から下へ順番に読み込み／処理されます。
例になっているJavaScriptではid="textarea"要素を取得していますが、head要素を読み込んだ段階ではid="textarea"要素はまだ読み込まれておらず見つけられないのでエラーとなってしまいます。

そのため、この場合ではbody要素の最下部ないしid="textarea"要素がでてきた後に該当のJavaScriptを記述する必要があります。