在本教程中，我們將學(xué)習(xí)使用 JavaScript 將 HTML 元素替換為另一個(gè)元素。
在某些用例中，我們需要用不同的元素替換整個(gè) HTML 元素。例如，它在表單驗(yàn)證中非常重要。假設(shè)我們從表單中獲取用戶的年齡，并且用戶輸入了錯(cuò)誤的年齡；我們可以通過(guò)替換 HTML 元素來(lái)顯示驗(yàn)證消息。我們需要用另一個(gè) HTML 元素替換 HTML 元素的另一個(gè)用例是動(dòng)態(tài)內(nèi)容加載，其中我們必須根據(jù)某些條件（例如位置等）顯示網(wǎng)頁(yè)內(nèi)容。
在這里，我們將學(xué)習(xí) 3 種替換網(wǎng)頁(yè) HTML 元素的方法。
使用replaceWith()方法
第一種方法使用replaceWith() 方法。我們需要通過(guò)將前一個(gè)元素作為引用并傳遞一個(gè)新元素作為引用來(lái)執(zhí)行replaceWith()方法。我們可以創(chuàng)建一個(gè)字符串格式的新元素。
語(yǔ)法
用戶可以按照以下語(yǔ)法使用replaceWith() Javascript方法將一個(gè)HTML元素替換為另一個(gè)HTML元素。
oldElement.replaceWith(newElement);
登錄后復(fù)制
在上面的語(yǔ)法中，oldElement是可替換元素，newElement是被替換元素。
示例
在下面的示例中，我們?cè)?HTML 中有一個(gè)包含“oldElement”id 的 div 元素。我們?cè)趩螕舭粹o時(shí)調(diào)用 ReplaceElement() 函數(shù)。在replaceElement()函數(shù)中，我們使用createElement()方法創(chuàng)建一個(gè)新的“h2”元素。此外，我們使用 textContent 屬性將內(nèi)容添加到新創(chuàng)建的 HTML 元素中。之后，我們使用replaceWith()方法將oldElement替換為newElement。
在輸出中，用戶可以單擊按鈕并查看網(wǎng)頁(yè)上的更改。
<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>
登錄后復(fù)制
使用outerHTML屬性
任何元素的outerHTML屬性都允許我們用另一個(gè)HTML元素替換整個(gè)HTML元素。我們需要為outerHTML屬性分配一個(gè)新的元素值來(lái)替換HTML元素。
語(yǔ)法
用戶可以按照以下語(yǔ)法使用outerHTML屬性將一個(gè)HTML元素替換為另一個(gè)HTML元素。
document.getElementById(id).outerHTML = newEle;
登錄后復(fù)制
示例
在下面的示例中，我們創(chuàng)建了包含“para”id 和一些文本內(nèi)容的“
”元素。在replaceElement()函數(shù)中，我們以字符串格式創(chuàng)建一個(gè)新的HTML元素，并將其值賦給“
”元素的outerHTML屬性。
在輸出中，用戶應(yīng)單擊按鈕將“
”元素替換為“
”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>
登錄后復(fù)制
示例
在下面的示例中，我們創(chuàng)建了包含不同選項(xiàng)的選擇菜單。在這里，我們將替換選擇菜單的特定選項(xiàng)。此外，我們創(chuàng)建了兩個(gè)輸入字段。一種是獲取索引號(hào)，另一種是獲取用戶的新選項(xiàng)值。
在replaceOption()函數(shù)中，我們從用戶那里獲取新的輸入值。之后，我們使用用戶在輸入中輸入的索引值來(lái)訪問(wèn)該選項(xiàng)。接下來(lái)，我們使用選項(xiàng)的outerHTML 屬性將選項(xiàng)替換為新值。
在輸出中，在第一個(gè)輸入字段中輸入從零開(kāi)始的索引值，在第二個(gè)輸入字段中輸入新的選項(xiàng)值，然后單擊按鈕替換選項(xiàng)。
<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>
登錄后復(fù)制
使用replaceChild()方法
replaceChild() 方法允許開(kāi)發(fā)人員用新元素替換特定 HTML 元素的子節(jié)點(diǎn)。在這里，我們可以替換特定元素的第一個(gè)子元素，以將其自身替換為新元素。
語(yǔ)法
用戶可以按照以下語(yǔ)法使用replaceChild()方法將一個(gè)HTML元素替換為另一個(gè)HTML元素。
oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);
登錄后復(fù)制
在上面的語(yǔ)法中，我們需要將新元素作為replaceChild()方法的第一個(gè)參數(shù)傳遞，將舊元素作為第二個(gè)參數(shù)傳遞。
示例
在下面的示例中，首先我們使用 createElement() 方法創(chuàng)建了“h3”元素。之后，我們使用 createTextNode() 方法來(lái)創(chuàng)建文本內(nèi)容。之后，我們使用appendChild()方法將文本節(jié)點(diǎn)附加到新創(chuàng)建的HTML元素中。
接下來(lái)，我們通過(guò)引用舊元素來(lái)執(zhí)行replaceChild()方法。此外，我們還傳遞了 HTMLele 作為第一個(gè)參數(shù)（一個(gè)新創(chuàng)建的元素），以及 oldEle.childNodes[0] 作為第二個(gè)參數(shù)（舊元素的第一個(gè)子元素，代表其自身）。
在輸出中，單擊按鈕并觀察網(wǎng)頁(yè)上的變化。
<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>
登錄后復(fù)制
我們學(xué)習(xí)了三種使用 JavaScript 將一個(gè) HTML 元素替換為另一個(gè) HTML 元素的不同方法。在第一種方法中，我們使用了replaceWith()方法，這是最好、最簡(jiǎn)單的方法之一。在第二種方法中，我們使用了outerHTML屬性；在第三種方法中，我們使用了replaceChild()方法，該方法一般用于替換子元素。
以上就是如何使用 JavaScript 將 HTML 元素替換為另一個(gè)元素？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
