JavaScript 変数を HTML 本文で表示する
-
innerHTMLを使用して、HTML 本文に JavaScript 変数を表示する -
document.write()プロパティを使用して、JavaScript 変数を HTML 本文に表示する -
window.alertプロパティを使用して、JavaScript 変数を HTML 本文に表示する
多くの場合、script タグを明示的に定義し、必要な出力用のコードブロックを HTML 本文に追加する方が簡単です。また、head タグで script タグを使用して、body タグの前に JavaScript のコードフェンスをロードします。
すべてのコンベンションにはその発言があります。コードにバグがないかどうかを確認する必要がある場合は、head セクションに JavaScript 関数を追加してタスクを実行できます。クリックイベントやその他の動的機能の body 要素で JavaScript を使用することもできます。
ここでは、JavaScript 変数を HTML 本文に表示する方法を示します。具体的には、コードブロックを body 要素に追加します。ただし、HTML 本文に値を渡すことと、JavaScript コード規則によってトリガーされた値を一時的に表示することには違いがあります。
innerHTML を使用して、HTML 本文に JavaScript 変数を表示する
特定の id または class をフェッチして変数の値を渡すことによる innerHTML の使用は、JavaScript 変数を HTML 本文に表示する最も一般的な方法の 1つです。
HTML 本文の span タグを id = "input"で初期化します。次に、script タグには、innerHTML プロパティを介してその id = "input"に送信される変数が含まれます。この DOM 操作は、JavaScript 変数を HTML 本文に配置するときに便利です。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<p> Hello! I'm <span id="input"></span>.</p>
<script>
document.getElementById('input').innerHTML = "Robert" ;
</script>
</body>
</html>
出力：
document.write() プロパティを使用して、JavaScript 変数を HTML 本文に表示する
ここで、document.write(parameter) プロパティを初期化するシステムは、主に変数のテストに使用されます。この場合、parameter は JavaScript で定義された変数またはオブジェクトです。
変数を表示するセグメントの前に、script タグで変数を宣言します。後で、p タグが作成され、その中に別の script タグが上位のスクリプトの開始を取ります。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<script>
var input = "Gwen";
function doc(){
document.write(input);}
</script>
</head>
<body>
<p> Hello! I'm <script>doc(input)</script>.</p>
</body>
</html>
出力：
window.alert プロパティを使用して、JavaScript 変数を HTML 本文に表示する
これは、DOM 操作を介して変数をテストするための非常に簡単なプロセスです。
JavaScript オブジェクトまたは変数を定義し、ここにランダムな値を格納します。script タグ内で、window.alert(variable) を宣言します。このプロパティは、ウィンドウオブジェクトをトリガーするときにメッセージを表示します。
コードスニペット：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
var input = "Hello! I'm Tom.";
window.alert(input);
</script>
</body>
</html>
出力：
