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

如何使用 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> 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> 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> 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> 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中文網其他相關文章！