在本教程中，我们将学习使用 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>
示例
<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()方法，该方法一般用于替换子元素。
