資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 替換 HTML 元素？
在本教程中，我們將學習如何使用 JavaScript 將一個 HTML 元素替換為另一個元素。
在某些用例中，我們需要用不同的 HTML 元素替換整個 HTML 元素。例如，這在表單驗證中非常重要。假設我們從表單中獲取使用者的年齡，並且使用者輸入了錯誤的年齡；我們可以透過替換 HTML 元素來顯示驗證訊息。另一個需要用另一個 HTML 元素替換 HTML 元素的用例是動態內容載入，其中我們必須根據某些條件（例如位置等）顯示網頁內容。
在這裡，我們將學習三種替換網頁 HTML 元素的方法。
使用 replaceWith() 方法
第一種方法使用 replaceWith() 方法。我們需要透過將上一個元素作為參考並透過傳遞一個新元素作為參考來執行 replaceWith() 方法。我們可以在字串格式中建立一個新元素。
語法
使用者可以按照以下語法使用 replaceWith() Javascript 方法將一個 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 元素替換為另一個。
document.getElementById(id).outerHTML = newEle;
示例
在下面的示例中，我們建立了包含“para” ID 和一些文字內容的“<p>”元素。在 replaceElement() 函式中，我們以字串格式建立一個新的 HTML 元素，並將其值分配給“<p>”元素的 outerHTML 屬性。
在輸出中，使用者應點選按鈕將“<p>”元素替換為“<h2>”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 元素替換為另一個。
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 元素替換為另一個。在第一種方法中，我們使用了 replaceWith() 方法，這是最好和最簡單的方法之一。在第二種方法中，我們使用了 outerHTML 屬性；在第三種方法中，我們使用了 replaceChild() 方法，該方法通常用於替換子元素。
16K+ 次瀏覽
