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!
Kindle

Comments

0

Your ad here?