在本教程中，我們將學習使用 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 元素替換為另一個元素？的詳細內容，更多請關注www.92cms.cn其它相關文章！
