JavaScript 更改文字

Ammar Ali 2023年1月30日 2021年7月3日
  1. 使用 JavaScript 中的 textContent 屬性更改元素的文字
  2. 使用 JavaScript 中的 createTextNode() 函式更改元素的文字
JavaScript 更改文字

本教程將討論如何使用 JavaScript 中的 textContent 屬性和 createTextNode() 函式更改元素的文字。

使用 JavaScript 中的 textContent 屬性更改元素的文字

如果你想用一些新文字替換一個元素的舊文字,你需要使用它的 id 或類名來獲取該元素,然後你可以使用 textContent 屬性用新文字替換舊文字。如果未指定 id 或類名,則可以使用 idclass 屬性為元素提供 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 或類名,則可以使用 idclass 屬性為元素提供 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
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

相關文章 - JavaScript Text