JavaScriptの記述について

JavaScriptはHTML上では

html

<script>
   //ここに記述します
</script>

外部ファイルから出力する場合は

html

<script src="example.js"></script>

そして外部ファイルにexample.jsを用意してそこに記述。

JavaScriptサンプルコードを用いての動作確認

html

document.write(`Hello`);
document.write(`<h1>Hello</h1>`);

実行結果:Hello
実行結果:h1としてHelloを表示してくれる
ページ上に文字を出力。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example"));
</script>

実行結果:<p id="example">Hello</p>
exampleをIDとして取得し、exampleが含まれているpタグ全体をコンソールに表示。
classの場合はgetElementByClassNameを使う

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById("example")textContent);
</script>

実行結果:Hello
一つ前の例のテキストだけを取得し、コンソールに表示。

html

<p id="example">Hello</p>
<script>
    console.log(document.getElementById(`example`).innerHTML);
</script>

実行結果:Hello
HTMLで動作するのと一緒の内容でidを取得してくれる

html

<div id="example"></div>
<script>
    const box = document.getElementById('example');
    box.innerHTML = '<p>Hello</p>';
</script>

実行結果:Hello
空要素のdivの中に新たにp要素を出力している。

documentとはWebページを構成しているHTMLソースそのもの
innerHTMLとtextContentの違いはinnerHTMLはタグをHTMLとして解釈してくれる。
　一方でtextContentはテキストの内容を表示するだけ。
テキストの内容だとわかっていればtextContentを使ったほうがいい。