HTML | DOM 位置 replace() 方法(1)

📌 相关文章

📜 HTML | DOM 位置 replace() 方法(1)

📅 最后修改于: 2023-12-03 14:41:49.046000 🧑 作者: Mango

HTML | DOM 位置 replace() 方法

概述

HTML | DOM位置的replace()方法用于在HTML文档中替换页面中的某些标记或文本。

replace()方法既可以替换HTML元素，也可以替换HTML元素的文本内容，还可以替换HTML属性中的值。

语法

node.replace(newnode)

其中，node代表要被替换的HTML元素或文本节点，newnode代表替换node的新HTML元素或文本。

参数

newnode：一个新的HTML元素或文本，将替换原先的node。
node：必需属性。一个要被替换的HTML元素或文本节点。

示例

<body>
  <p id="paragraph1">这是第一个段落。</p>
  <p id="paragraph2">这是第二个段落。</p>
  <button onclick="replaceText()">替换文本</button>
  <button onclick="replaceParagraph()">替换段落</button>
  
  <script>
    function replaceText() {
      var p = document.getElementById("paragraph1");
      var new_element = document.createElement("em");
      var text = document.createTextNode("新的文本");
      new_element.appendChild(text);
      p.replaceChild(new_element, p.childNodes[0]);
    }
    
    function replaceParagraph() {
      var new_element = document.createElement("h2");
      var text = document.createTextNode("新的段落");
      new_element.appendChild(text);
      var p = document.getElementById("paragraph2");
      var parent = p.parentNode;
      parent.replaceChild(new_element, p);
    }
  </script>
</body>

以上代码演示了如何使用replace()方法进行HTML文本和元素的替换。在使用replace()方法时应注意以下几点：

对于文本节点的替换，需要先将新文本节点添加到要替换的元素中，然后执行replaceChild()方法进行替换操作。
对于元素的替换，需要先创建一个新元素节点，并将其添加到替换前的元素的父元素中，然后使用父元素来调用replaceChild()方法进行替换操作。