在 HTML 正文中顯示 JavaScript 變數
-
使用
innerHTML在 HTML 正文中顯示 JavaScript 變數 -
使用
document.write()屬性在 HTML 正文中顯示 JavaScript 變數 -
使用
window.alert屬性在 HTML 正文中顯示 JavaScript 變數
顯式定義 script 標籤並在 HTML 正文中新增必要的輸出程式碼塊通常更容易。我們還在 head 標籤中使用 script 標籤來載入 body 標籤之前的 JavaScript 程式碼。
每個慣例都有它的備註；如果我們需要檢查程式碼是否沒有錯誤，我們可以在 head 部分新增 JavaScript 函式來執行任務。我們還可以在 body 元素中使用 JavaScript 來實現點選事件和其他動態功能。
在這裡，我們將演示如何在 HTML 正文中顯示 JavaScript 變數，具體來說，我們將在 body 元素中新增我們的程式碼塊。但是在 HTML 正文中傳遞值和臨時顯示由 JavaScript 程式碼約定觸發的值是有區別的。
使用 innerHTML 在 HTML 正文中顯示 JavaScript 變數
通過獲取特定的 id 或 class 並傳遞變數的值來使用 innerHTML 是在 HTML 正文中顯示 JavaScript 變數的最常見方法之一。
我們將在我們的 HTML 正文中使用 id = "input" 初始化一個 span 標籤。然後 script 標籤將通過 innerHTML 屬性將一個變數傳送到該 id = "input"。在 HTML 正文中放置 JavaScript 變數時，這種 DOM 操作很方便。
程式碼片段：
<!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() 屬性在 HTML 正文中顯示 JavaScript 變數
這裡，初始化 document.write(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 屬性在 HTML 正文中顯示 JavaScript 變數
這是通過 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>
輸出：
