Как обернуть группу тегов HTML в содержащий тег, используя JavaScript?

Question

Как обернуть группу тегов HTML в содержащий тег, используя JavaScript?

0

Я столкнулся с проблемой, которую я не знаю, как ее решить. Мне нужно обернуть каждую группу тегов <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

ОБНОВЛЕНИЕ: Спасибо! Я пробовал оба ответа, и они оба отлично работают!

d13 23 сен. 2013, в 21:48

Источник

Теги:

javascript

html

1 ответ

Ещё вопросы

jEremyB · Accepted Answer · 2013-09-24T03-32-00.000Z

Это также удалит старые теги 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);
    }