備忘録です。
確認は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);