JavaScript 更改文字
Ammar Ali
2023年1月30日
2021年7月3日
本教程將討論如何使用 JavaScript 中的 textContent 屬性和 createTextNode() 函式更改元素的文字。
使用 JavaScript 中的 textContent 屬性更改元素的文字
如果你想用一些新文字替換一個元素的舊文字，你需要使用它的 id 或類名來獲取該元素，然後你可以使用 textContent 屬性用新文字替換舊文字。如果未指定 id 或類名，則可以使用 id 或 class 屬性為元素提供 id 或類名。確保 id 或類名是唯一的；否則，任何具有相同 id 的元素也將被更改。例如，讓我們使用 span 標籤建立一個文字元素，並使用 JavaScript 中的 textContent 函式更改其文字。請參考下面的程式碼。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
document.getElementById("SpanID").textContent="New Text";
</script>
</body>
</html>
輸出：
New Text
JavaScript 程式碼放置在上述程式碼中的 HTML 檔案中，但你可以根據需要將它們分開。你還可以指定更改文字的條件，例如單擊按鈕。如果你不想替換文字而是在舊文字中附加一些新文字，則可以使用以下方法。
使用 JavaScript 中的 createTextNode() 函式更改元素的文字
如果要將新文字附加到舊文字，則需要使用其 id 或類名獲取該元素，然後使用 createTextNode() 函式，你可以建立新文字的節點並使用 appendChild() 函式，你可以將新文字附加到舊文字中。如果未指定 id 或類名，則可以使用 id 或 class 屬性為元素提供 id 或類名。確保 id 或類名是唯一的；否則，任何具有相同 id 的元素也將被更改。例如，讓我們使用 span 標籤建立一個文字元素，並使用 JavaScript 中的 createTextNode() 函式附加其文字。請參考下面的程式碼。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span id="SpanID"> Old Text </span>
<script type="text/javascript">
Myspan = document.getElementById("SpanID");
Mytxt = document.createTextNode("New text");
Myspan.appendChild(Mytxt);
</script>
</body>
</html>
輸出：
Old Text New Text
正如你在輸出中看到的，新文字與舊文字連線在一起。
Author: Ammar Ali
