每四个段落创建和更改 h1 标签（h1 内容包含段落的前十个元素）

Question

我需要做的是每3个段落创建h1标签，所以我有12个段落，应该有4个h1标签，每个需要包含每三个段落的10个元素。

例子：

h1（内容将是它下面每个段落的前十个元素） p p p h1 p p p 等等。

到目前为止我做了什么：

HTML：

<div id="pastraipos">
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
  <p>Lorem ipsum dolor sit amet..</p>
</div>

JS：

var parent = document.getElementById("pastraipos");
var children = parent.childElementCount;
    console.log(children);
for (var i=0; i<children; i=i+3){
    var h = document.createElement("H1"); 
    var t = document.createTextNode("Hello World");     
    h.appendChild(t);
    parent.insertBefore(h, parent.children[i]);    
}

因此，这段代码创建了 4 个 h1 元素，并将其附加到 <div id="pastraipos"></div>

它有什么问题，它只是每 3 个元素附加一个子元素？

我的结果是：

<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>
<p>Lorem ipsum dolor sit amet..</p>

我想我需要下一个循环来匹配要附加的正确索引，但问题是当我添加到这个循环时，第二个循环 - 它搞砸了，我被困在这里很糟糕，需要你的帮助，谢谢.

Answer 1

这里有两个问题。首先是循环过早停止。第二个是您错误地计算了插入新元素的位置。

这两个问题的原因是一样的：你忘记了你正在实时更新 DOM。每次调用 insertBefore 都会改变 DOM 并改变父元素中的元素数量。

首先，停止过早。您将循环长度基于childElementCount 的缓存版本。这是不正确的。您需要基于实时版本，因为元素的数量不断增加。插入第一个 h1 后，您现在有 13 个元素，然后是 14，然后是 15，依此类推。如果您只在条件中使用childElementCount，这可以正常工作：

for (var i = 0; i < parent.childElementCount; i = i + 3) {

现在，下一个问题是同一行代码。看看插入第一个元素后的 DOM 是什么样子的：

h1
p
p
p
p
...

你想在哪里插入下一个h1？ 不是在第三个元素之后，而是在第四个元素之后，即第三个p 元素。你实际上每次都需要i + 4。

这是一个工作示例：

for (var i = 0; i < parent.childElementCount; i = i + 4) {

var parent = document.getElementById("pastraipos");

for (var i = 0; i < parent.childElementCount; i = i + 4) {
  var h = document.createElement("H1");
  var t = document.createTextNode("Hello World");
  h.appendChild(t);
  parent.insertBefore(h, parent.children[i]);
}

<div id="pastraipos">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <p>11</p>
  <p>12</p>
</div>

Answer 2

对于您的金额，只需在 for 循环中修复 2 个问题：i+=4 和 i<=children。

var parent = document.getElementById("pastraipos");
var children = parent.childElementCount;
console.log(children);
for (var i=0; i<=children; i=i+4){
    var h = document.createElement("H1"); 
    var t = document.createTextNode("Hello World");     
    h.appendChild(t);
    parent.insertBefore(h, parent.children[i]);    
}

jsfiddle

Answer 3

在您的 div 中，您可以使用选择器获取所有 P，然后循环遍历它们并在每 3 段后插入一个 h1：

function insertHeadings(id) {
  var paras =  document.querySelectorAll('#' + id + ' p');
  for (var h, i=0, iLen=paras.length; i<iLen; i+=3) {
    h = document.createElement('h1');
    h.appendChild(document.createTextNode('heading ' + i/3));
    paras[i].parentNode.insertBefore(h, paras[i]);
  }
}

body {
  font-size: 50%;
}
p {
  margin: 0;
}

<div id="d0">
  <p>p1<p>p2<p>p3<p>p4<p>p5<p>p6<p>p7<p>p8<p>p9<p>p10<p>p11<p>p12
</div>
<button onclick="insertHeadings('d0')">Insert headings</button>