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

首页

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 id="Using-the-i-replaceWith-method-i-to-replace-the-HTML-elements-in-JavaScript"> 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 id="Using-the-i-outerHTML-property-i-to-replace-the-HTML-elements-in-JavaScript"> 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 id="Using-the-i-outerHTML-property-i-to-replace-the-options-in-the-select-menu"> 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 id="Using-the-i-replaceChild-method-i-to-replace-the-HTML-elements-in-JavaScript"> 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中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。

See all articles