数据结构
网络
关系数据库管理系统
操作系统
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+ 次浏览
