How to select html elements from a string to append in text.html?

Questions
1

Hello,

I am preparing an App with Framework7 and getting the content from an external website with getJSON.

When I want to show a long text with chapters, I though about doing it with the Popup for framework7. So I have the following content in the website (to get it with getJSON):

<div id="capitulos">
<a href="#" data-popup=".popup-1" class="open-popup">Chapter 1</a>
<a href="#" data-popup=".popup-2" class="open-popup">Chapter 2</a>
</div>

<div class="popup popup-1">
<div class="content-block">
   <p>Chapter 1</p>
   <p><a href="#" class="close-popup">Close</a></p>
   <p>Text for chapter 1</p>
</div>
</div>

<div class="popup popup-2">
  <div class="content-block">
    <p>Chapter 2</p>
    <p><a href="#" class="close-popup">Close</a></p>
    <p>Text for chapter 2</p>
   </div>
</div>

I execute in my App the method getJSON and I get this string.

And now I want to append the “div” that contains the chapters in the “page-content” div of the html, and the “.popup” class divs outside the page-content, as it is explained in the docs for framework7. Something like this:

var htmlstring = html text from getJSON; (I think that first you should convert the string to and HTML object)
select #capitulos from htmlstring and append to the “.page-content” class
select .popup from htmlstring and append outside the “.page-content” class

Can you help me to do that?

Thanks.