时间戳

首页 > 解决方案 > 一次替换 DOM 中的一组元素

javascript - 一次替换 DOM 中的一组元素

问题描述

假设我有一个由这个 html 表示的 DOM 树。

<div id="root">
  <div>
    <p>hoge</p>
    <span>fuga</span>
  </div>
  <div>
    <span>piyo</span>
    <div>
      <span>foobar</span>
    </div>
  </div>
</div>

如果我想用 s 替换所有的<span>s <button>，我该如何实现呢？

const replaceElements = () => {
  const page = document.getElementById("root")
  const elements = document.getElementsByTagName('span');
  elements.forEach(item => ???)
}

标签： javascripthtmldom

解决方案

它不断获取第一个span并将其转换为按钮，直到不再有spans，方法是将元素替换为 span 的 innerHTML 周围的按钮标签。查看片段。（在 Chrome 76 中测试）

const replaceElements = () => {
  const elements = document.getElementsByTagName('span');
  while (elements.length > 0) {
  const item = elements[0];
    item.outerHTML = '<button>' + item.innerHTML + '</button>';
  }
}


const replaceElements = () => {
  const elements = document.getElementsByTagName('span');
  while (elements.length > 0) {
  const item = elements[0];
    item.outerHTML = '<button>' + item.innerHTML + '</button>';
  }
}
replaceElements();
<div id="root">
  <div>
    <p>hoge</p>
    <span>fuga</span>
  </div>
  <div>
    <span>piyo</span>
    <div>
      <span>foobar</span>
    </div>
  </div>
</div>

推荐阅读