javascript - 如何重建DOM？

Question

加载后我需要更改页面。
源结构在这里:

<div id='content'>
  <h1>...</h1>
  <p>...</p>
  <h1>...</h1>
  <p>...</p>
  <h1>...</h1>
  <p>...</p>
</div>

我需要将其重建为这个:

<div id='content'>
  <div>
    <div>
      <h1>...</h1>
      <div>
        <p>...</p>
      </div>
    </div>
  </div>
 
  <div>
    <div>
      <h1>...</h1>
      <div>
        <p>...</p>
      </div>
    </div>
  </div>
 
  <div>
    <div>
      <h1>...</h1>
      <div>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

这是我的算法:

const createComplexNode = () => {
  const parentBlock = document.querySelector('#content')
  const parentContent = parentBlock.querySelectorAll('h1, p')
 
  if (parentContent.length === 0) return
 
  const mainNode = document.createElement('div')
  const titleNode = document.createElement('div')
  const bodyNode = document.createElement('div')
  mainNode.className = 'desc-container'
  titleNode.className = 'desc-head'
  bodyNode.className = 'desc-body'
 
  const indexes = getIndex(parentContent)
 
  console.log(parentContent[indexes.start])
 
  titleNode.appendChild(parentContent[indexes.start])
 
  for (let i = 1; i <= indexes.end; i++) {
    bodyNode.appendChild(parentContent[i])
  }
 
  mainNode
    .appendChild(titleNode)
    .appendChild(bodyNode)
 
  parentBlock.appendChild(mainNode)
  return createComplexNode()
}
 
const getIndex = nodeList => {
  const indexes = {
    start: -1,
    end: -1,
  }
 
  const regex = new RegExp('h?')
 
  for (let i = 0; i < nodeList.length; i++) {
    if (regex.test(nodeList[i].localName) && indexes.start < 0) {
      indexes.start = i
    }
    if (nodeList[i].localName === 'p') {
      indexes.end = i
      break
    }
  }
  return indexes
}

我的主要问题在这里constparentContent =parentBlock.querySelectorAll('h1, p')。
它工作正常，但仅限于第一个周期。因为，这个函数捕获父节点中的所有标签以及已经包装的元素。这是因为无限递归。我该如何预防？

Answer 1

使用一些用于查询和创建 DOM 元素的实用函数，以及 .append() 方法:

// DOM Utility functions:

const EL = (sel, el) => (el || document).querySelector(sel);
const ELS = (sel, el) => (el || document).querySelectorAll(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Recreate DOM:

const EL_content = EL("#content");
const ELS_h1 = ELS("h1", EL_content);

ELS_h1.forEach(EL_h1 => {

  const EL_div_outer = ELNew("div", {className: "wrapper-outer"});
  const EL_div_inner = ELNew("div", {className: "wrapper-inner"});
  const EL_div_parag = ELNew("div", {className: "wrapper-parag"});
  const EL_p = EL_h1.nextElementSibling;

  EL_div_outer.append(EL_div_inner);
  EL_div_inner.append(EL_h1, EL_div_parag);
  EL_div_parag.append(EL_p);
  EL_content.append(EL_div_outer);

});

div { padding: 10px; background: rgba(0,0,0, 0.1); }

<div id="content">
  <h1>Title 1</h1>
  <p>Paragraph 1</p>
  <h1>Title 2</h1>
  <p>Paragraph 2</p>
  <h1>Title 3</h1>
  <p>Paragraph 3</p>
</div>

工作原理:

• 定位 "#content" 内的所有 h1 元素并使用 NodeList.prototype.forEach() 循环它们
• 在循环内，使用 Element.nextElementSibling 收集 h1 的 下一个 同级 p 元素.
• 使用 Document.createElement() 创建所需的包装器(使用实用程序ELNew函数)
• 使用 .append() 相互移动元素，并将它们重新插入到父级 "#content"

代码非常简洁、干净，并且应该是不言自明的。