如何使用 JavaScript 将 HTML 元素替换为另一个元素？-js教程-PHP中文网

使用replaceWith()方法

语法

示例

使用outerHTML属性

使用replaceChild()方法

首页

web前端

js教程

如何使用 JavaScript 将 HTML 元素替换为另一个元素？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 13, 2023 pm 07:37 PM

如何使用 JavaScript 将 HTML 元素替换为另一个元素？

在本教程中，我们将学习使用 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 元素替换为另一个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7741

Java教程

1643

CakePHP 教程

1397

Laravel 教程

1290

PHP教程

1233

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。