javascript - How can I separate the HTML Elements and the CSS elements and return them? -

this js fiddle of 1 part want achieve.

js fiddle

alert($("#content")[0].outerhtml); 

this returns dom structure like:

 <div id="content">      <div id="example1" style="width:100px height:100px background-color:red"></div>      <div id="example2" style="width:50px height:50px background-color:blue"></div>      <div id="example3" style="width:25px height:25px background-color:yellow"></div>  </div> 

i adding divs dynamically , css inline. ideally, want able take css out can return both div elements , css attributes separately text elements.

you can remove style attributes , store them in id-style map, can use them later if need. this:

var styles = {};    $("#content").children().each(function() {      styles[this.id] = $(this).attr('style');      $(this).removeattr('style');  });    // check  alert(      'html:\n\n' +       $("#content")[0].outerhtml +       '\n\ncss:\n\n' +       json.stringify(styles, null, 4)  );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="content">      <div id="example1" style="width:100px height:100px background-color:red"></div>      <div id="example2" style="width:50px height:50px background-color:blue"></div>      <div id="example3" style="width:25px height:25px background-color:yellow"></div>  </div>