首頁 >web前端 >html教學 >如何使用JavaScript更改所有HTML標籤內的文本

如何使用JavaScript更改所有HTML標籤內的文本

WBOY轉載: 2023-08-26 13:57:141568瀏覽

在本文中，我們將使用 JavaScript 執行更改所有 HTML 標記內的文字的任務。讓我們深入研究本文，以了解有關更改所有 HTML 中的文字的更多信息，但首先，讓我們定義 HTML 標記。

什麼是 HTML 標籤

HTML 標籤是一段標記語言，用來表示 HTML 文件中 HTML 元素的開始和結束。 HTML 標籤是 HTML 元素的組成部分，可協助 Web 瀏覽器將 HTML 文件轉換為網頁。

為了更好地理解使用 JavaScript 更改所有 HTML 標記內的文字。讓我們看看以下範例。

範例

在下面的範例中，我們將建立一個簡單的網頁，我們將透過執行腳本來更改文字。

<!DOCTYPE html>
<html>
   <body style="text-align:center;">
      <h2>
         Click on the button to change the text
      </h2>
      <label id = "tutorial">
         Welcome to Tutorialspoint
      </label>
      <br>
      <button onclick="changetext()">
         Click Here!
      </button>
      <script>
         function changetext() {
            var x = document.getElementById("tutorial");
            if (x.innerHTML === "Welcome to Tutorialspoint") {
               x.innerHTML = "The Best E-way Learning";
            } else {
               x.innerHTML = "Welcome to Tutorialspoint";
            }
         }
      </script>
   </body>
</html>

當腳本執行時，它將產生一個由文字和點擊按鈕組成的輸出。如果使用者按一下該按鈕，文字將發生更改，並且網頁上將顯示另一個文字。

使用replaceWith()

Element.replaceWith() 方法以一組 Node 或字串物件取代此 Element 的父級子級清單中的物件。為 String 物件插入等效的文字節點。

文法

以下是 replaceWith() 的語法 -

ChildNode.replaceWith(Node);

範例

考慮以下範例，其中我們使用 replaceWith() 更改標記內的文字。

<!DOCTYPE html>
<html>
   <body>
      <h2 id="tutorial">
      <span class="quotation">“</span>
      Lost in the ave of you
      <span class="quotation">”</span>
      </h2>
      <script>
         const changed = document.getElementById('tutorial');
         changed.childNodes[2].replaceWith('Welcome');
      </script>
   </body>
</html>

執行上述腳本時，將彈出輸出窗口，顯示網頁上腳本中使用的原始文字替換的文字。

使用querySelector()

當提供一個或一組選擇器時，Document 方法 querySelector() 傳回文件中與它們相符的第一個 Element。如果沒有符合則傳回 Null。

文法

以下是querySelector()的語法

querySelector(selectors)

範例

執行以下程式碼，我們使用 querySelector() 來變更 HTML 標籤中的文字。

<!DOCTYPE html>
<html>
   <body>
      <h1>Welcome</h1>
      <script>
         document.querySelector("h1").textContent = 'Tutorialspoint';
      </script>
   </body>
</html>

執行腳本時，它們將產生一個輸出，其中包含網頁上的文本，該文本已替換為標記中使用的原始文本。

以上是如何使用JavaScript更改所有HTML標籤內的文本的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何在JavaScript中將布林值轉換為數字？下一篇：如何在JavaScript中將布林值轉換為數字？

看更多