如何重建 DOM？

Question

I need to change a page after load.
The source structure here:

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

I need to rebuild it to this one:

<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>

Here is my algorithm:

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
}

My main problem is here const parentContent = parentBlock.querySelectorAll('h1, p') .
It's work fine but only on first cycle. Because, this function catch all tags in parent node and already wrapped elements too. It's because of infinity recursion. How can I prevent it?

Answer 1

With some utility functions for querying and creating DOM Elements, and the .append() method:

 // 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>

How it works:

• Target all h1 Elements inside "#content" and loop them using NodeList.prototype.forEach()
• Inside the loop, collect the h1 's next sibling p element using Element.nextElementSibling .
• Create the needed wrappers using Document.createElement() (with the utility ELNew function)
• Use .append() to move the elements within each other, and reinsert them to the parent "#content"

The code is pretty minimal, clean, and should be self-explanatory.