InnerHTML including styles from stylesheets

Question

Is there a way to get the innerHTML of a section of the page together with all style information that is used by the elements in that section(including styles that also come from corresponding stylesheets). So that when I insert the html somewhere else It will display with original styling.

Answer 1

It should display with styling anyway, unless I'm missing something in your question. If you have this style:

.item { color: red; background-color: #CCC; border: solid black 1px; }
.item a { color: #300; text-decoration: none; }
.item h2 { font-size: 1.5em; }

And this HTML:

<div id="test">
   <div class="item">
      <h2>Cat</h2>
      <a href="#">Details</a>
   </div>
   <div class="item">
      <h2>Dog</h2>
      <a href="#">Details</a>
   </div>
</div>

Moving that HTML to another section of the code (whether copy/pasting or moving it through DOM manipulation) shouldn't matter. The styles should be applied correctly. It's just a matter of constructing your CSS in a modular way. In this case, too much specificity could be an issue.