在本教程中，我们将学习使用 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 元素替换为另一个元素？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 JavaScript 将 HTML 元素替换为另一个元素？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
