Javascript-如何替换多个HTML节点

川崎刚

我正在构建一个电子邮件构造函数，当用户保存模板时，我只是将HTML发送到服务器。但是我需要删除drap＆drop元素才能将其发送到服务器。

我对DOM的操作不是很好，所以我不知道从哪里开始。

这是我的HTML：

<table>
  <tbody>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>aa</p>
          <p>bb</p>
        </div>
      </th>
    </tr>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>cc</p>
          <p>dd</p>
        </div>
      </th>
    </tr>
  </tbody>
</table>

我需要删除所有.components-drop-areadiv。像这样：

<table>
  <tbody>
    <tr>
      <th>
        <p>aa</p>
        <p>bb</p>
      </th>
    </tr>
    <tr>
      <th>
        <p>cc</p>
        <p>dd</p>
      </th>
    </tr>
  </tbody>
</table>

我在这里停止了代码：

var table = document.querySelector('table').cloneNode(true)

let dropAreas = table.querySelectorAll('.components-drop-area')

console.log(table, dropAreas)

如何在保留其内容的同时循环并删除所需的元素？

黑曜石时代

一种方法是简单地更换parentNode的innerHTMLs的在.components-drop-area innerHTMLS：

let dropAreas = document.querySelectorAll('.components-drop-area');
for (let i = 0; i < dropAreas.length; i++) {
  dropAreas[i].parentNode.innerHTML = dropAreas[i].innerHTML;
}

// The <div> contents have now been extracted, and the <div> elements removed
console.log(document.querySelector('table').innerHTML);

<table>
  <tbody>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>aa</p>
          <p>bb</p>
        </div>
      </th>
    </tr>
    <tr>
      <th>
        <div class="components-drop-area">
          <p>cc</p>
          <p>dd</p>
        </div>
      </th>
    </tr>
  </tbody>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。