Create DOM Tree out of a Dynamic HTML String

Just a very short post before I go to bed as I'm really tired today. I just played around with some JavaScript code, building a Google Chrome extension when I came to the point where I needed to process the DOM tree of a HTML string.

Basically I had something like the following:

...
   var dynamicHtmlString = "<pre>public class SomeClass{....}</pre>";
   ...

The dynamicHtmlString was build by my JavaScript code through a long-lasting process. At the end I wanted to format those (basically pieces of source code) in a proper way by associating the "prettyprint" css class to all "pre" elements and then calling google-code-prettify's prettyPrint() method.

Simply doing document.body.innerHTML=dynamicHtmlString; doesn't work obviously as I wanted to use jQuery for traversing the DOM and adding the CSS class. Luckly, jQuery does also support creating the DOM tree, by simply wrapping html code within $().

   var dynamicHtmlString = "<pre>public class SomeClass{....}</pre>";
   $(dynamicHtmlString).appendTo("body");

   $("pre").each(function(){
      $(this).attr("class", "prettyprint"); //check this for compatibility with v1.6 -> use .prop(...) otherwise
   });
   prettyPrint();

So that did the job. Pretty easy, isn't it :). This tells a lot about the power of jQuery. Love this library!

---

Questions? Thoughts? Hit me up on Twitter