Question

我使用javascript并在其中有一个带有一些html标签的div元素，如下所示，一些元素是嵌套的，我想将它们保持在同一级别，首先html是这样的：

＆＃13;

NULL

＆＃13;

我不知道如何提取这些嵌套元素并将它们保持在同一级别，如下所示：

＆＃13;

<div>
  <p>
    some text on here 1
    <i>
      some italic 
      <b>text</b>
      here
    </i> text text text
  </p>
  <b>
    some bold text on here
  </b>
</div>

＆＃13;

更新1

代码的性能不是太重要！

Answer 1

此操作需要多久进行一次？它是性能危害还是罕见的场合？

如果它不是瓶颈，你可以选择div的所有后代并将它们附加到div。附加现有节点时，它将自动移动到适当的位置。

const myDiv = document
      .querySelector('#my-div')

const allDescendants = Array.from(myDiv.getElementsByTagName('*'))

allDescendants.forEach(d => {
  myDiv.appendChild(d);
});

console.log(myDiv.innerHTML);

<div id="my-div">
  <p>
    some text on here 1
    <i>
      some italic 
      <b>text</b>
      here
    </i> text text text
  </p>
  <b>
    some bold text on here
  </b>
</div>

不确定这是否是故意的，但根据您的示例，您只想移动元素并将其他节点（如文本节点）保留在原来的位置。一个具体示例是第一个here中的<i>文本部分。

要实现此目的，您可以通过所有后代执行预订DFS，并构建新的平面树。完成后，将旧元素替换为新元素。

const myDiv = document
      .querySelector('#my-div')

const flatDiv = document.createElement('div')
function recurseAndFlatten(parent) {
  parent.childNodes.forEach(child => {
    if (child.nodeType === Node.ELEMENT_NODE) {
      flatDiv.appendChild(child);
      recurseAndFlatten(child);
    }
  });
}

recurseAndFlatten(myDiv);

myDiv.replaceWith(flatDiv);

console.log(flatDiv.innerHTML);

<div id="my-div">
  <p>
    some text on here 1
    <i>
      some italic 
      <b>text</b>
      here
    </i> text text text
  </p>
  <b>
    some bold text on here
  </b>
</div>

Answer 2

您可以使用带参数.cloneNode()的{{1}}克隆原始节点;迭代父true的{{1}}，如果节点.childNodes不是<div>且.previousElementSibling不是传递给函数推送的原始父元素null { {1}}和.parentElement到数组，其他.parentElement为.tagName，将.textContent推送到数组;如果.nodeName不等于#text并且元素中仅存在.textContent个节点，则将.nodeName推送到数组;如果节点#text不等于#text且节点.outerHTML节点为.tagName，则推送节点#text，.firstChild #text，关闭标记到数组，删除.tagName;否则递归调用函数

.firstChild

.textContent

如何在js中将嵌套的html元素提取到同一级别

更新1

2 个答案: