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

2020-05-19

備忘録です。

確認はJSBin( https://jsbin.com/ )とabout:blank画面で行いました。

document.write()

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

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

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

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

だいぶ使い勝手がよくなりました。
文字をつなげて書くことだってできます。

//ブラウザ上に文字を表示する。
//その文字を消す
//ブラウザ上に2行文字を表示する。
let writeA = "hello world";
let writeB = "ハローワールド";
document.write(writeA + " " + writeB);


//その文字を消す(こんな使い方しないかも)
document.open();

innerHTMLで書き込む

getElementById()

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

<h1 id="here></h1>

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

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

位置を指定できて便利。

createElement()とappendChild()

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

//body要素内に子要素creEleを追加
document.body.appendChild(creEle);