使用 domparser 在代码块周围创建一个新的 div 容器

Question

带有一串：

<h1>aa</h1><p>xx</p><p>yy</p><h1>aaa</h1><p>xxx</p><p>yyy</p>

我想在 header 之前插入一个 div 容器，将下一个 header 之前的内容作为这个新 div[=14= 中的内容]

<div id="aa"><h1>aa</h1><p>xx</p><p>yy</p></div><div id="aaa"><h1>aaa</h1><p>xxx</p><p>yyy</p></div>

到目前为止这是我所做的

let s = "<h1>aa</h1><p>xx</p><p>yy</p><h1>aaa</h1><p>xxx</p><p>yyy</p>";

const parser = new DOMParser();
const doc = parser.parseFromString(s, 'text/html');
const elems = doc.body.querySelectorAll('*');

[...elems].forEach(el => {
  if (el.textContent !== '' && el.matches('H1')) {
    // create div container
    var div = document.createElement('div');

    //Set Id 
    div.id = el.textContent;

    // Get the next sibling next until H1
    var siblings = nextUntil(el, 'H1');
    for (var i = 0; i < siblings.length; i++) {
      // move sibling into div
      div.appendChild(siblings[i]);
    }

    // insert div before el in the DOM tree
    el.parentNode.insertBefore(div, el.nextSibling);
  }
});

function nextUntil(elem, selector) {
  // Setup siblings array
  var siblings = [];
  // Get the next sibling element
  elem = elem.nextElementSibling;
  // As long as a sibling exists
  while (elem) {
    // If we've reached our match
    if (elem.matches(selector))
      break;

    // Otherwise, push it to the siblings array
    siblings.push(elem);

    // Get the next sibling element
    elem = elem.nextElementSibling;
  }
  return siblings;
}

console.log(doc.body.innerHTML);

这很好地创建了 div，但在 header 之后。我如何调整它以在 header 之前创建 header？

Answer 1

您可以将当前元素添加到 div 容器

//Prepend current element
div.insertBefore(el, div.firstChild);

let s = "<h1>aa</h1><p>xx</p><p>yy</p><h1>aaa</h1><p>xxx</p><p>yyy</p>";

const parser = new DOMParser();
const doc = parser.parseFromString(s, 'text/html');
const elems = doc.body.querySelectorAll('*');

[...elems].forEach(el => {
    if (el.textContent !== '' && el.matches('H1')) {
    // create div container
    var div = document.createElement('div');

    //Set Id 
    div.id = el.textContent;

    // Get the next sibling next until H1
    var siblings = nextUntil(el, 'H1');
    for (var i = 0; i < siblings.length; i++) {
        // move sibling into div
        div.appendChild(siblings[i]);
    }

    // insert div before el in the DOM tree
    el.parentNode.insertBefore(div, el.nextSibling);
    
    //Prepend current element
    div.insertBefore(el, div.firstChild);
  }
});

function nextUntil(elem, selector) {
    // Setup siblings array
    var siblings = [];
    // Get the next sibling element
    elem = elem.nextElementSibling;
    // As long as a sibling exists
    while (elem) {
        // If we've reached our match
        if (elem.matches(selector))
        break;

        // Otherwise, push it to the siblings array
        siblings.push(elem);

        // Get the next sibling element
        elem = elem.nextElementSibling;
    }
    return siblings;
}

console.log(doc.body.innerHTML);

您可以追加当前元素然后选择兄弟元素

// Get the next sibling next until H1
var siblings = nextUntil(el, 'H1');

// insert div before el in the DOM tree
el.parentNode.insertBefore(div, el.nextSibling);

//Append the current element
div.appendChild(el);
// move sibling into div
for (var i = 0; i < siblings.length; i++) {
  div.appendChild(siblings[i]);
}

let s = "<h1>aa</h1><p>xx</p><p>yy</p><h1>aaa</h1><p>xxx</p><p>yyy</p>";

const parser = new DOMParser();
const doc = parser.parseFromString(s, 'text/html');
const elems = doc.body.querySelectorAll('*');

[...elems].forEach(el => {
  if (el.textContent !== '' && el.matches('H1')) {
    // create div container
    var div = document.createElement('div');

    //Set Id 
    div.id = el.textContent;

    // Get the next sibling next until H1
    var siblings = nextUntil(el, 'H1');

    // insert div before el in the DOM tree
    el.parentNode.insertBefore(div, el.nextSibling);
    div.appendChild(el);
    for (var i = 0; i < siblings.length; i++) {
      // move sibling into div
      div.appendChild(siblings[i]);
    }


  }
});

function nextUntil(elem, selector) {
  // Setup siblings array
  var siblings = [];
  // Get the next sibling element
  elem = elem.nextElementSibling;
  // As long as a sibling exists
  while (elem) {
    // If we've reached our match
    if (elem.matches(selector))
      break;

    // Otherwise, push it to the siblings array
    siblings.push(elem);

    // Get the next sibling element
    elem = elem.nextElementSibling;
  }
  return siblings;
}

console.log(doc.body.innerHTML);

使用 domparser 在代码块周围创建一个新的 div 容器

Create a new div container around block of code with domparser

javascript

domparser