4段落ごとにh1タグを作成して変更する（h1コンテンツには段落の最初の10個の要素が含まれています）

Question

だから、h1タグを3段落ごとに作成する必要があるので、12段落、それぞれに3つの段落ごとに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

あなたはここでは2つの問題があります。最初は、ループがすぐに停止することです。 2つ目は、新しい要素を挿入する位置を誤って計算することです。

両方の問題の理由は同じです。あなたはDOMライブを更新していることを忘れています。 insertBeforeを呼び出すごとにDOMが変更され、親要素内の要素の数が変更されます。

まず、あまりにもすぐに停止します。ループ長は、キャッシュされたバージョンchildElementCountに基づいています。これは間違っています。要素の数が増え続けるため、ライブバージョンでベースにする必要があります。最初のh1が挿入された後、13要素、14要素、15要素などが追加されました。あなただけの条件付きでchildElementCountを使用している場合、これは正常に動作します：今

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

、次の問題は、コードの同じ行です。 DOMは、最初の要素が挿入された後にどのように見えるかを見てください：

あなたは次の h1を挿入したいん

h1 
p 
p 
p 
p 
... 

？ 3番目の要素の後ではなく、4番目の後に3番目のp要素であるであり、ではありません。毎回i + 4を実行する必要があります。あなたがそれらをループそして、セレクタを使用して、すべてPsとを取得し、すべての第三の後にH1を挿入することができ、あなたのdiv内

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ループでi+=4とi<=childrenの2つの修正があります。

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

：ここ

は実施例であります段落：

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>