Question

Trying to make kinda WISYWIG editor that creates a div with some inner elements. The div (with all the inner elements structure), once designed, should be serialized (somehow, hope it’s the right term, into string and/or JSON), stored in DB and later inserted to DOM of some other HTML document.

Hence, the questions:

1. Which is the best way to serialize a div?
2. Which is the best way to de-serialize a div (and insert it to the DOM)?

Answer 1

If you want to grab the HTML code of your DOM elements, you can use innerHTML. See this fiddle for an example:

HTML:

<div id='div1'>
  <p>A Paragraph!</p>
  <br/>
  <p>Another p</p>
</div>
<button id='go'>Get HTML</button>

JS

document.getElementById('go').onclick = function(){ 
  alert(document.getElementById('div1').innerHTML);
};