Я столкнулся с проблемой, которую я не знаю, как ее решить. Мне нужно обернуть каждую группу тегов <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-крючки для макета.)
Я не знаю, как начать решение этой проблемы, поэтому я был бы благодарен за любую помощь!
ОБНОВЛЕНИЕ: Спасибо! Я пробовал оба ответа, и они оба отлично работают!
Это также удалит старые теги 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);
}