极客笔记JavaScript 如何替换一个HTML元素为另一个元素
在本教程中，我们将学习如何使用JavaScript将一个HTML元素替换为另一个元素。
在某些情况下，我们需要用一个不同的元素来替换整个HTML元素。例如，在表单验证中非常重要。假设我们从表单中获取用户的年龄，如果用户输入了错误的年龄，我们可以通过替换HTML元素来显示验证消息。另一个需要用另一个HTML元素来替换的场景是动态内容加载，我们必须根据特定的条件（如位置等）显示网页内容。
在这里，我们将学习3种替换网页HTML元素的方法。
使用replaceWith()方法
第一种方法使用replaceWith()方法。我们需要通过引用先前的元素并传递一个新元素作为引用来执行replaceWith()方法。我们可以以字符串格式创建一个新元素。
语法
用户可以按照下面的语法使用replaceWith() JavaScript方法来将一个HTML元素替换为另一个元素。
oldElement.replaceWith(newElement);
在上述句法中，oldElement是一个可替换元素，而newElement是一个被替换的元素。
示例
在下面的示例中，我们在HTML中有一个div元素，它包含了’id为oldElement’的元素。我们在按钮点击时调用replaceElement()函数。在replaceElement()函数中，我们使用createElement()方法创建一个新的h2元素。同时，我们使用textContent属性向新创建的HTML元素添加内容。之后，我们使用replaceWith()方法来用newElement替换oldElement。
在输出中，用户可以点击按钮并在网页上看到变化。
<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元素替换另一个HTML元素。
oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);
在上面的语法中，我们需要将新的元素作为replaceChild()方法的第一个参数传递，并将旧的元素作为第二个参数。
示例
在下面的示例中，首先我们使用createElement()方法创建了’h3’元素。然后，我们使用createTextNode()方法创建文本内容。然后，我们使用appendChild()方法将文本节点附加到新创建的HTML元素上。
接下来，我们通过引用旧元素来执行replaceChild()方法。同时，我们将新创建的元素作为第一个参数，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()方法，通常用于替换子元素。