如何使用javascript將一組HTML標簽包裝到包含標簽中？

Question

我遇到了一個我不知道該如何解決的問題。 我需要用包含<article>標簽的<h2>和<p>標簽的每個分組進行包裝。

我當前的HTML看起來像這樣：

<h2 category="someCategory">
<p>text text text<p>

<h2 category="anotherCategory">
<p>text text text<p>
<p>text text text<p>

我需要使用javascript使其看起來像這樣：

 <article>
   <h2 category="someCategory">
   <p>text text text<p>
 </article>

<article>    
  <h2 category="anotherCategory">
  <p>text text text<p>
  <p>text text text<p>
</article>

javascript需要弄清楚每個新的<h2>標簽是新article元素的開始。 然后，下一個<h2>標記之前的最后一個<p> <h2>標記將在本文結尾。 （更大的圖景是我正在解析降價文檔，並且需要<article>標簽作為用於布局的css掛鈎。）

我不知道如何開始解決這個問題，所以我將不勝感激！

• D13

更新：謝謝！ 我已經嘗試過兩個答案，並且它們都工作正常！

Answer 1

這還將刪除舊的HTML標記。

    var articles = [], article, sibling, toDelete = [];
    var h2s = document.getElementsByTagName("H2");

    for(var i = 0, h2; h2 = h2s[i++];){
        article = document.createElement("article");
        sibling = h2.nextElementSibling;

        article.appendChild(h2.cloneNode(true));

        while(sibling && sibling.tagName !== "H2"){

            if(sibling.tagName === "P"){
                article.appendChild(sibling.cloneNode(true));
                toDelete.push(sibling);
            }

            sibling = sibling.nextElementSibling;
        }

        articles.push(article);
    }

    while(toDelete.length > 0){
        toDelete[toDelete.length-1].parentNode.removeChild(toDelete[toDelete.length-1]);
        toDelete.pop();
    }

    while(h2s.length > 0){
        h2s[0].parentNode.removeChild(h2s[0]);
    }

    for(i = 0, article; article = articles[i++];){
        document.body.appendChild(article);
    }