CODEWITHSUNDEEP
javascripthtmlinserttags
d13
d13

Reputation: 10077

How to wrap a group of HTML tags into a containing tag using javascript?

I've run into a problem that I don't know how to solve. I need to wrap each grouping of <h2> and <p> tags with a containing <article> tag.

My current HTML looks something like this:

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

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

I need to use javascript to make it look like this:

 <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>

Somehow the javascript needs to figure out that each new <h2> tag is the start of a new article element. And then that and the last <p> tag before the next <h2> tag will be end of the article. (The bigger picture is that I'm parsing a markdown document and need the <article> tags as css hooks for layout.)

I have no idea how to begin solving this problem, so I would be grateful of any help!!

UPDATE: Thank you!! I've tried both answers and they both work perfectly!

Upvotes: 0

Views: 341

Answers (1)

jEremyB
jEremyB

Reputation: 1754

This will also remove the old HTML tags.

    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);
    }

Upvotes: 1

Related Questions