javascript를 사용하여 포함 태그에 HTML 태그 그룹을 래핑하는 방법은 무엇입니까?

Question

해결 방법을 모르는 문제가 발생했습니다. <h2> 및 <p> 태그를 포함하는 각 그룹을 <article> 태그로 묶어야합니다.

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

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

내가이처럼 보이게하기 위해 자바 스크립트를 사용해야합니다 : : 어떻게 든 자바 스크립트가 필요

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

는 각각의 새로운 <h2> 태그 있음을 알아 내기 위해

나의 현재 HTML은 다음과 같이 보입니다 새 기사 요소의 시작입니다. 그리고 그 다음과 그 전에 <p> 태그는 다음 <h2> 태그 전에 기사의 끝 부분이 될 것입니다.

내가 어떻게이 문제를 해결하기 시작하는 아무 생각이 없다 (더 큰 그림. 나는 인하 문서를 구문 분석 및 레이아웃에 대한 CSS 후크로 <article> 태그가 필요 해요 것입니다), 그래서 어떤 도움을 감사하게 될 것입니다! !

• D13

UPDATE : 감사합니다! 나는 두 답을 모두 해봤지만 둘 다 완벽하게 작동합니다!

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