HTML | DOM replaceWith() 方法(1)

📌 相关文章

📜 HTML | DOM replaceWith() 方法(1)

📅 最后修改于: 2023-12-03 15:31:12.502000 🧑 作者: Mango

HTML | DOM replaceWith() 方法

replaceWith() 方法用于将一个元素替换为其他 HTML 内容。

语法

element.replaceWith(newElement)

replaceWith() 方法的参数 newElement 可以是以下类型之一：

HTML 字符串
元素对象
元素对象的数组
文本字符串

当 newElement 是一个元素对象的数组时，replaceWith() 方法会将当前元素替换为数组中的第一个元素，并将其它元素插入到当前元素之后。如果数组中只有一个元素，则表现与传入单个元素对象相同。

示例

替换元素为文本

<!DOCTYPE html>
<html>
<body>

<h2>替换元素为文本</h2>

<p id="demo">这是一个段落。</p>

<button onclick="replaceText()">替换为文本</button>

<script>
function replaceText() {
  var p = document.createElement("p");
  var text = document.createTextNode("替换为文本.");
  p.appendChild(text);
  var demo = document.getElementById("demo");
  demo.replaceWith(p);
}
</script>

</body>
</html>

输出

替换为文本.

替换元素为元素

<!DOCTYPE html>
<html>
<body>

<h2>替换元素为元素</h2>

<div id="demo">这是一个 div 元素。</div>

<button onclick="replaceElement()">替换为新元素</button>

<script>
function replaceElement() {
  var div = document.createElement("div");
  div.innerHTML = "<h3>新元素</h3><p>这是一个新的段落。</p>";
  var demo = document.getElementById("demo");
  demo.replaceWith(div);
}
</script>

</body>
</html>

输出

新元素

这是一个新的段落。

替换元素为多个元素

<!DOCTYPE html>
<html>
<body>

<h2>替换元素为多个元素</h2>

<div id="demo">这是一个 div 元素。</div>

<button onclick="replaceElements()">替换为多个元素</button>

<script>
function replaceElements() {
  var div1 = document.createElement("div");
  div1.innerHTML = "<h3>元素1</h3><p>这是第一个段落。</p>";

  var div2 = document.createElement("div");
  div2.innerHTML = "<h3>元素2</h3><p>这是第二个段落。</p>";

  var div3 = document.createElement("div");
  div3.innerHTML = "<h3>元素3</h3><p>这是第三个段落。</p>";

  var demo = document.getElementById("demo");
  demo.replaceWith([div1, div2, div3]);
}
</script>

</body>
</html>

输出

元素1

这是第一个段落。

元素2

这是第二个段落。

元素3

这是第三个段落。

结论

replaceWith() 方法可以方便地替换一个元素为其他 HTML 内容，可以是基本类型，也可以是元素对象或者元素对象数组。它是 DOM 重构的重要工具之一。