如何使用 JavaScript 將 HTML 元素替換為另一個元素？-js教程-PHP中文網

首頁

web前端

js教程

如何使用 JavaScript 將 HTML 元素替換為另一個元素？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 13, 2023 pm 07:37 PM

如何使用 JavaScript 将 HTML 元素替换为另一个元素？

在本教學中，我們將學習使用 JavaScript 將 HTML 元素替換為另一個元素。

在某些用例中，我們需要用不同的元素取代整個 HTML 元素。例如，它在表單驗證中非常重要。假設我們從表單中取得使用者的年齡，而使用者輸入了錯誤的年齡；我們可以透過取代 HTML 元素來顯示驗證訊息。我們需要用另一個 HTML 元素替換 HTML 元素的另一個用例是動態內容加載，其中我們必須根據某些條件（例如位置等）顯示網頁內容。

在這裡，我們將學習 3 種替換網頁 HTML 元素的方法。

使用replaceWith()方法

第一種方法使用replaceWith() 方法。我們需要透過將前一個元素作為引用並傳遞一個新元素作為引用來執行replaceWith()方法。我們可以建立一個字串格式的新元素。

文法

使用者可以依照下列語法使用replaceWith() Javascript方法將一個HTML元素替換為另一個HTML元素。

oldElement.replaceWith(newElement);

在上面的語法中，oldElement是可替換元素，newElement是被替換元素。

範例

在下面的範例中，我們在 HTML 中有一個包含「oldElement」id 的 div 元素。我們在點擊按鈕時呼叫 ReplaceElement() 函數。在replaceElement()函數中，我們使用createElement()方法建立一個新的「h2」元素。此外，我們使用 textContent 屬性將內容新增到新建立的 HTML 元素中。之後，我們使用replaceWith()方法將oldElement替換為newElement。

在輸出中，使用者可以點擊按鈕並查看網頁上的變更。

<html>
<body>
   <h3 id="Using-the-i-replaceWith-method-i-to-replace-the-HTML-elements-in-JavaScript"> Using the <i> replaceWith() method </i> to replace the HTML elements in JavaScript </h3>
   <div id = "oldElement"> This div is the old element. </div>
   <button onclick = "replaceElement()"> Replace Element </button>
   <script>
      function replaceElement() {
         var newElement = document.createElement('h2');
         newElement.textContent = 'This element is the new element.';
         var oldElement = document.getElementById('oldElement');
         oldElement.replaceWith(newElement);
     }
   </script>
</html>

使用outerHTML屬性

任何元素的outerHTML屬性都允許我們用另一個HTML元素取代整個HTML元素。我們需要為outerHTML屬性指派一個新的元素值來取代HTML元素。

文法

使用者可以依照下列語法使用outerHTML屬性將一個HTML元素替換為另一個HTML元素。

document.getElementById(id).outerHTML = newEle;

範例

在下面的範例中，我們建立了包含「para」id 和一些文字內容的「

」元素。在replaceElement()函數中，我們以字串格式建立一個新的HTML元素，並將其值賦給「

」元素的outerHTML屬性。

在輸出中，使用者應點擊按鈕將「

」元素替換為「

」HTML 元素。

<html>
<body>
   <h3 id="Using-the-i-outerHTML-property-i-to-replace-the-HTML-elements-in-JavaScript"> Using the <i> outerHTML property </i> to replace the HTML elements in JavaScript </h3>
   <p id = "para"> Welcome to the TutorialsPoint! </p>
   <button onclick = "replaceElement()"> Replace Element </button>
   <script>
      function replaceElement() {
         let newEle = '<h2> You clicked the button to replace the element. <h2>';
         document.getElementById('para').outerHTML = newEle;
      }
   </script>
</html>

範例

在下面的範例中，我們建立了包含不同選項的選擇選單。在這裡，我們將替換選擇選單的特定選項。此外，我們建立了兩個輸入欄位。一種是取得索引號，另一種是取得使用者的新選項值。

在replaceOption()函數中，我們從使用者那裡取得新的輸入值。之後，我們使用使用者在輸入中輸入的索引值來存取該選項。接下來，我們使用選項的outerHTML 屬性將選項替換為新值。

在輸出中，在第一個輸入欄位中輸入從零開始的索引值，在第二個輸入欄位中輸入新的選項值，然後按一下按鈕取代選項。

<html>
<body>
   <h3 id="Using-the-i-outerHTML-property-i-to-replace-the-options-in-the-select-menu"> Using the <i> outerHTML property </i> to replace the options in the select menu </h3>
   <label for = "indexInput"> Index: </label>
   <input type = "number" id = "indexInput">  <br>  <br>
   <label for = "valueInput"> New Value: </label>
   <input type = "text" id = "valueInput">   <br>  <br>
   <select id = "demo">
      <option value = "1"> One </option>
      <option value = "2"> Two </option>
      <option value = "3" selected> Three </option>
      <option value = "4"> Four </option>
      <option value = "5"> Five </option>
      <option value = "6"> Six </option>
   </select>
   <button onclick = "replaceOption()"> Replace Option </button>
   <script>
      function replaceOption() {
          // get user input
          var index = parseInt(document.getElementById('indexInput').value);
          var newValue = document.getElementById('valueInput').value;
          var list = document.getElementById('demo');
          // get the option to replace
          var option = list.options[index];
          // replace the option
          option.outerHTML = '<option value="' + newValue + '">' + newValue + '</option>';
      }
   </script>
</html>

使用replaceChild()方法

replaceChild() 方法可讓開發人員以新元素取代特定 HTML 元素的子節點。在這裡，我們可以替換特定元素的第一個子元素，以將其自身替換為新元素。

文法

使用者可以依照下列語法使用replaceChild()方法將一個HTML元素替換為另一個HTML元素。

oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);

在上面的語法中，我們需要將新元素作為replaceChild()方法的第一個參數傳遞，並將舊元素作為第二個參數傳遞。

範例

在下面的範例中，首先我們使用 createElement() 方法建立了「h3」元素。之後，我們使用 createTextNode() 方法來建立文字內容。之後，我們使用appendChild()方法將文字節點附加到新建立的HTML元素中。

接下來，我們透過引用舊元素來執行replaceChild()方法。此外，我們也傳遞了 HTMLele 作為第一個參數（一個新建立的元素），以及 oldEle.childNodes[0] 作為第二個參數（舊元素的第一個子元素，代表其本身）。

在輸出中，點擊按鈕並觀察網頁上的變化。

<html>
<body>
   <h3 id="Using-the-i-replaceChild-method-i-to-replace-the-HTML-elements-in-JavaScript"> Using the <i> replaceChild() method </i> to replace the HTML elements in JavaScript </h3>
   <p id = "para"> Welcome to the TutorialsPoint! </p>
   <button onclick = "replaceElement()"> Replace Element </button>
   <script>
      function replaceElement() {
         // create a new element
         var HTMLele = document.createElement("h3");
         // create a new text node
         var txt = document.createTextNode("This is a content of new element!");
         // use appendChild() to add a text node to the element
         HTMLele.appendChild(txt);
         var oldEle = document.getElementById("para");
         // using replaceChild() to replace the old element with a new element
         oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);
       }
   </script>
</html>

我們學習了三種使用 JavaScript 將一個 HTML 元素替換為另一個 HTML 元素的不同方法。在第一種方法中，我們使用了replaceWith()方法，這是最好、最簡單的方法之一。在第二種方法中，我們使用了outerHTML屬性；在第三種方法中，我們使用了replaceChild()方法，該方法一般用於取代子元素。

以上是如何使用 JavaScript 將 HTML 元素替換為另一個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。