JavaScriptを使用して基本的な文字やテキストをブラウザの画面に表示させる方法を紹介します。
文字やテキストをブラウザの画面に表示させる方法
document.writeを使う
よくjavascriptを始めるときの入門書とかによく出てくると思いますが画面にテキストを表示させるために「document.write」を使って表示させます。
また現在ではdocument.writeは非推奨とされています。
ブラウザーのレンダリングだったりDOMなどの構造に与える影響を考慮して非推奨とされているようです。
document.write("テキスト");innerHTMLを使う
innerHTMLを使うことで指定したhtml要素の中身に文字やテキストを書き込んで表示することができます。
htmlとして画面に表示したい場合に使います。
elem.innerHTML = '<p>テキスト</p>';insertAdjacentHTMLを使う
innerHTMLと違うところとしてはinsertAdjacentHTMLを使用すると指定したHTML要素の前後に文字を追加して表示することができます。
| beforebegin | 指定するhtml要素の前 |
| afterbegin | 指定するhtml要素の後 |
| beforeend | 指定するhtml要素の中の後 |
| afterend | 指定するhtml要素の中の前 |
textContentを使う
textContentはテキストのみを画面に表示させることができます。
htmlを含めたテキストの場合は、innerHTMLやinsertAdjacentHTMLを使いテキストのみの場合はtextContentを使用します。
elem_txt.textContent = "テキスト";alertを使う
ポップアップでアラート画面を表示したい場合に使います。
テキストのみでhtmlのタグは使えません。
alert('テキスト');書き方の例
次は上記で説明したdocument.write、innerHTML、insertAdjacentHTML、textContent、alertを使ってテキストを表示させる例になります。
html
<div id="box"></div>
<div id="txt"><p id="text"></p></div>javascript
var elem = document.getElementById("box");
var elem_txt = document.getElementById("text");
elem.innerHTML = '<p class="text1">innerHTMLを使って画面に表示させる</p>';
elem.insertAdjacentHTML('beforeend','<p class="text2">insertAdjacentHTMLを使って表示</p>');
elem_txt.textContent = "textContentを使ってテキストを表示";
document.write("document.writeを使ってテキストを表示させる（位置を指定できない）");
alert('アラート画面');
コメント