在本教程中，我们将学习使用 JavaScript 将 HTML 元素替换为另一个元素。
在某些用例中，我们需要用不同的元素替换整个 HTML 元素。例如，它在表单验证中非常重要。假设我们从表单中获取用户的年龄，并且用户输入了错误的年龄；我们可以通过替换 HTML 元素来显示验证消息。我们需要用另一个 HTML 元素替换 HTML 元素的另一个用例是动态内容加载，其中我们必须根据某些条件（例如位置等）显示网页内容。
在这里，我们将学习 3 种替换网页 HTML 元素的方法。
使用replaceWith()方法
第一种方法使用replaceWith() 方法。我们需要通过将前一个元素作为引用并传递一个新元素作为引用来执行replaceWith()方法。我们可以创建一个字符串格式的新元素。
立即学习“Java免费学习笔记（深入）”；
语法
用户可以按照以下语法使用replaceWith() Javascript方法将一个HTML元素替换为另一个HTML元素。
oldElement.replaceWith(newElement);
在上面的语法中，oldElement是可替换元素，newElement是被替换元素。
示例
在下面的示例中，我们在 HTML 中有一个包含“oldElement”id 的 div 元素。我们在单击按钮时调用 ReplaceElement() 函数。在replaceElement()函数中，我们使用createElement()方法创建一个新的“h2”元素。此外，我们使用 textContent 属性将内容添加到新创建的 HTML 元素中。之后，我们使用replaceWith()方法将oldElement替换为newElement。
在输出中，用户可以单击按钮并查看网页上的更改。
Using the replaceWith() method to replace the HTML elements in JavaScript
This div is the old element.function replaceElement() { var newElement = document.createElement('h2'); newElement.textContent = 'This element is the new element.'; var oldElement = document.getElementById('oldElement'); oldElement.replaceWith(newElement); }
使用outerHTML属性
任何元素的outerHTML属性都允许我们用另一个HTML元素替换整个HTML元素。我们需要为outerHTML属性分配一个新的元素值来替换HTML元素。
语法
用户可以按照以下语法使用outerHTML属性将一个HTML元素替换为另一个HTML元素。
document.getElementById(id).outerHTML = newEle;
示例
在下面的示例中，我们创建了包含“para”id 和一些文本内容的“
”元素。在replaceElement()函数中，我们以字符串格式创建一个新的HTML元素，并将其值赋给“
”元素的outerHTML属性。
Gridster.js多列网格式拖动布局插件
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
74 查看详情 
在输出中，用户应单击按钮将“
”元素替换为“
”HTML 元素。
Using the outerHTML property to replace the HTML elements in JavaScript
Welcome to the TutorialsPoint!
function replaceElement() { let newEle = ' You clicked the button to replace the element. '; document.getElementById('para').outerHTML = newEle; }
示例
Using the outerHTML property to replace the HTML elements in JavaScript
Welcome to the TutorialsPoint!
function replaceElement() { let newEle = ' You clicked the button to replace the element. '; document.getElementById('para').outerHTML = newEle; }
在下面的示例中，我们创建了包含不同选项的选择菜单。在这里，我们将替换选择菜单的特定选项。此外，我们创建了两个输入字段。一种是获取索引号，另一种是获取用户的新选项值。
在replaceOption()函数中，我们从用户那里获取新的输入值。之后，我们使用用户在输入中输入的索引值来访问该选项。接下来，我们使用选项的outerHTML 属性将选项替换为新值。
在输出中，在第一个输入字段中输入从零开始的索引值，在第二个输入字段中输入新的选项值，然后单击按钮替换选项。
Using the outerHTML property to replace the options in the select menu
One Two Three Four Five Six 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 = '' + newValue + ''; }
使用replaceChild()方法
replaceChild() 方法允许开发人员用新元素替换特定 HTML 元素的子节点。在这里，我们可以替换特定元素的第一个子元素，以将其自身替换为新元素。
语法
用户可以按照以下语法使用replaceChild()方法将一个HTML元素替换为另一个HTML元素。
oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);
在上面的语法中，我们需要将新元素作为replaceChild()方法的第一个参数传递，将旧元素作为第二个参数传递。
示例
在下面的示例中，首先我们使用 createElement() 方法创建了“h3”元素。之后，我们使用 createTextNode() 方法来创建文本内容。之后，我们使用appendChild()方法将文本节点附加到新创建的HTML元素中。
接下来，我们通过引用旧元素来执行replaceChild()方法。此外，我们还传递了 HTMLele 作为第一个参数（一个新创建的元素），以及 oldEle.childNodes[0] 作为第二个参数（旧元素的第一个子元素，代表其自身）。
在输出中，单击按钮并观察网页上的变化。
Using the replaceChild() method to replace the HTML elements in JavaScript
Welcome to the TutorialsPoint!
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]); }
我们学习了三种使用 JavaScript 将一个 HTML 元素替换为另一个 HTML 元素的不同方法。在第一种方法中，我们使用了replaceWith()方法，这是最好、最简单的方法之一。在第二种方法中，我们使用了outerHTML属性；在第三种方法中，我们使用了replaceChild()方法，该方法一般用于替换子元素。
以上就是如何使用 JavaScript 将 HTML 元素替换为另一个元素？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/829622.html
微信扫一扫 
支付宝扫一扫 
