Javascriptを使ってサイト(html)に文字を表示する | Javascript超初心者の勉強

備忘録です。

確認はJSBin( https://jsbin.com/ )で行いました。

document.write()

一番シンプルに文字を表示する方法がdocument.write()です。
※XHTML 非対応

document.write("テキスト");

このままだとHTML的によろしくないのでpタグに入れてあげましょう。

document.write("<p>JS最高!</p>");

だいぶ使い勝手がよくなりました。

innerHTMLで書き込む

getElementById()

以下のHTMLがあったとします。

<h1 id="here></h1>

下記のJavascriptでJS最高!!がid="hereのh1に表示されます。

let idHere = document.getElementById("here");
idHere.innerHTML = "JS最高!!";

位置を指定できて便利。

createElement()とappendChild()

let creEle = document.createElement('h1'); //h1タグを生成creEleに代入
creEle.innerHTML = "JS最高!!"; //creEleのh1タグ内にinnerHTMLで文字生成
document.body.appendChild(creEle); //body要素内に子要素creEleを追加