創建和和更改h1標籤每四個段落（H1內容中包含段落的前十個元素）

Question

所以我需要做的是創造每3段h1標籤，所以我有12個段落，應該有4個H1標籤，每個段落需要包含10個元素。

例如，

H1（內容將第一各段落的下方10個元件）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

爲了您的金額，僅有2個修正：i+=4和i<=children在你的for循環。

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你可以得到所有使用選擇，然後通過他們循環，每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>