每四个段落创建和更改 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 个元素追加 child？

我的结果是：

<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

对于您的金额，只需修复 2 个问题：for 循环中的 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 2

你这里有两个问题。首先是循环停止得太早。二是你计算错了插入新元素的位置。

这两个问题的原因是一样的：您忘记了您正在更新 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 3

在您的 div 中，您可以使用选择器获取所有 Ps，然后遍历它们并在每第 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>

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

Create and and change h1 tag every four paragraphs (h1 content contains first ten elements of paragraphs)

html

javascript

dom

for-loop

appendchild