html页面到json对象

Question

I want to append html page to json object, and want to access the div tags by there id from json object. I am new to this and don't know want to do.

the scenario is like this:

I have a html page in which multiple div tags are there with id=page1, page 2 and so on. I want to add this page to json object and than access it page id wise in js ie page1 page2 and so on..can anyone provide some solution to this.

I have just seen some values are entered in json object.how to append some html page or the elements to it?

Answer 1

Here is the github project. you can use this library easily.

Answer 2

If I read you correctly, you are trying to store page contents in a JSON object for future use.

Saving page content is straight forward, get the innerHTML of the body tag into a variable or assign directly to your JSON object's property.

var body = [].slice.call(document.getElementsByTagName('body'))[0];
json.Content = body.innerHTML;

Getting the JSON object's property to be able to query, is a little tricky. You will need to use the DOM parser to parse it and then query it.

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(json.Content, "text/html");

Here is a small demo:

 var data = '{"id":"1", "Title":"Page", "Content":""}'; var json = JSON.parse(data); var body = [].slice.call(document.getElementsByTagName('body'))[0]; json.Content = body.innerHTML; var parser = new DOMParser(); var htmlDoc = parser.parseFromString(json.Content, "text/html"); console.log(htmlDoc.getElementById("Page-02").innerText); 

 <div id="Page-01"> 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit </div> <div id="Page-02"> 2. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </div> <div id="Page-03"> 3. Ut enim ad minim veniam </div>