Split HTML in divs with Javascript/JQuery based on HR tags

Question

I want to split articles (= HTML content) that I receive from a webservice in different DIVs, based on a HR tag.

I explain with an example, this is what I receive from the service:

<p>This is an article bla bla</p> <hr/> <p>this is the next page of the article blabla ...</p>

I want to make, based on the HR-tag:

<div><p>This is an article bla bla</p></div>
<div><p>this is the next page of the article blabla ...</p></div>

I tried different thinks but is doesn't work. How can I do that with Javascript or JQuery (or with another method ;-))?

Answer 1

Use split to create and array and loop through to create the divs.

var html = "<p>This is an article bla bla</p> <hr/> <p>this is the next page of the article blabla ...</p>";


$(html.split('<hr/>')).each(function(){
    $('#test').append('<div>'+this+'</div>')
})

Demo