Question

我遇到了一个我不知道如何解决的问题。我需要使用包含<h2>标记的每个<p>和<article>标记分组。

我当前的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>标记是新文章元素的开头。然后，下一个<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);
    }

如何使用javascript将一组HTML标记包装到包含标记中？

1 个答案: