document.writeを使わずにJavaScriptの変数をHTMLページに表示する方法

JavaScriptの変数をHTMLページに表示する際、document.writeは非推奨とされています。ページの読み込み完了後に使用するとドキュメント全体が上書きされてしまうなど、さまざまな問題を引き起こすためです。代わりに推奨されるのが、Element.innerHTMLプロパティを使う方法です。

innerHTMLを使った変数の表示方法

以下のコード例では、入力フィールドに入力された値を、別の要素へリアルタイムに表示しています。

var $myName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');

$myName.addEventListener('input', function(event){
    $jsValue.innerHTML = $myName.value;
}, false);

コードの解説

• document.querySelector()：CSSセレクタを指定してHTML要素を取得します。ここでは入力欄の.nameクラスと、表示先の.jsValueクラスの2つの要素を取得しています。
• addEventListener('input', ...)：入力フィールドに値が入力されるたびに、指定した関数が実行されます。
• innerHTML：対象要素のHTML内容を書き換えます。ここでは入力された値を$jsValue要素に反映させています。

textContentとの違いとセキュリティ

単にテキストを表示するだけであれば、XSS（クロスサイトスクリプティング）のリスクを避けるためにtextContentを使うのも有効です。

$jsValue.textContent = $myName.value;

innerHTMLはHTMLタグを解釈して表示しますが、textContentは文字列をそのままテキストとして表示します。ユーザーの入力値を扱う場合は、セキュリティの観点からtextContentの使用を検討するとよいでしょう。