是否可以在 JavaScript 中更改 HTML 内容?

javascriptobject oriented programmingfront end technology更新于 2025/5/12 19:56:17

是的，可以在 javascript 中更改 HTML 的内容。通常 HTML 内容将位于 HTML 标记中，例如 <p>、<span> 等。在 javascript 中，我们有 DOM 方法，它们能够访问 HTML 标记。这些方法(例如 document.getElementById()、document.getElementByTagName() 等)利用标记来更改 HTML 内容。

示例 1

在以下示例中，使用 javascript DOM 方法 document.getElementById() 更改 span 标记中的内容。

<html>
<body>
   <span id="change">Is javaScript is java.</span>
   <input type = "button" value = "change"
   onclick='document.getElementById("change").innerHTML = "No JavaScript is not java!"'>
</body>
</html>

执行上述代码后，我们将在屏幕上看到以下内容

如果我们点击上面的"更改"按钮，我们将得到以下输出

输出

示例 2

在以下示例中，使用 Javascript DOM 方法更改段落标记中的内容。

<html>
<body>
   <p id="change">Elon musk has failed 3 times</p>
   <input type = "button" value = "change"
   onclick='document.getElementById("change").innerHTML = "Elon musk has succeded in his fourth attempt"'>
</body>
</html>

执行上述代码后，我们将在屏幕上看到以下内容