XML Wrapper

This is a very simple-minded jquery utility plugin to wrap XML into <span />s that can be subsequently displayed, styled, selected and bound. It scratches my need of displaying and manipulating XML, YMMV.

I'm placing this into public domain, so feel free to modify if it doesn't meet your needs.

Documentation

Creating

After loading the plugin, a call to $.wrapXml(xml) where xml contains 

          <root><e a="v">t</e></root>
will be wrapped into: 
          <div class="xml-DOCUMENT">
              <span class="xml-ELEMENT" name="root">
                  <span class="xml-symbol">&lt;</span>
                  <span class="xml-nodeName">root</span>
                  <span class="xml-body">
                      <span class="xml-symbol">&gt;</span>
                      <span class="xml-nodeValue">
                          <span class="xml-ELEMENT" name="e">
                              <span class="xml-symbol">&lt;</span>
                              <span class="xml-nodeName">e</span>
                              <span class="xml-body">
                                  <span class="xml-ATTRIBUTE" name="a" value="v">
                                      <span class="xml-nodeName">a</span>
                                      <span class="xml-symbol">="</span>
                                      <span class="xml-nodeValue">v</span>
                                      <span class="xml-symbol">"</span>
                                  </span>
                                  <span class="xml-symbol">&gt;</span>
                                  <span class="xml-nodeValue">
                                      <span class="xml-TEXT">
                                          <span class="xml-body">t</span>
                                      </span>
                                  </span>
                                  <span class="xml-symbol">&lt;</span>
                              </span>
                              <span class="xml-symbol">/</span>
                              <span class="xml-body">
                                  <span class="xml-nodeName">e</span>
                              </span>
                              <span class="xml-symbol">&gt;</span>
                          </span>
                      </span>
                      <span class="xml-symbol">&lt;</span>
                  </span>
                  <span class="xml-symbol">/</span>
                  <span class="xml-body">
                      <span class="xml-nodeName">root</span>
                  </span>
                  <span class="xml-symbol">&gt;</span>
              </span>
          </div>
with indentation added for clarity. This is made into a jQuery object.

Styling

The following CSS classes (with sample values) can be used to achieve a form of syntax highlighting:
.xml-DOCUMENT{ border-style: solid ; border-width: 1px ; }
.xml-symbol{ color : black ; }
.xml-nodeName{ color : green ; }
.xml-nodeValue{ color : blue ; }
.xml-ELEMENT{ display : block ; padding-left: 1em ; padding-right: 1em; }
.xml-COMMENT{ display : block ; color : gray; padding-left : 1em; padding-right: 1em; }
.xml-COMMENT .xml-body{ display : block ; }
.xml-CDATA_SECTION{ display : block ; }
.xml-OTHER{ display : block ; }
.xml-ATTRIBUTE .xml-nodeName{ color : red ; }
.xml-ATTRIBUTE .xml-nodeValue{ color : purple; }

Selecting/Binding

The following selector patterns allow various parts of an XML element to be selected and bound:
element itself $(".xml-ELEMENT[name='e']")
element name $(".xml-ELEMENT[name='e'] .xml-nodeName")
element body (for collapsing/expanding element) $(".xml-ELEMENT[name='e'] .xml-body")
attribute $(".xml-ELEMENT[name='e'] .xml-ATTRIBUTE[name='a']")
attribute name $(".xml-ELEMENT[name='e'] .xml-ATTRIBUTE[name='a'] .xml-nodeName")
attribute value $(".xml-ELEMENT[name='e'] .xml-ATTRIBUTE[name='a'] .xml-nodeValue")
element content $(".xml-ELEMENT[name='e'] .xml-nodeValue")

There is a convenient xpath-like utility method $.wrapXmlFind($jqueryElement, xpathlike) to select an XML element. Some examples as follows:
/e1/e2Go to document root, and select element e2 which is contained in element e1
e2/#select node value of element e2 which is contained in current $jqueryElement
e2/@a1select attribute a2 which is contained in element e2 which is contained in current $jqueryElement
$.wrapXmlFind() implementation is expected to be changed drastically (primarily to make it resemble jQuery's selectors).

There is also a convenience utility method $.wrapXmlSetCollapsible($jqueryElement, boolean) to enable/disable collapsible behaviour of the wrapped XML elements.

Notes

Demo : Person Browser

This should be clickable. Try clicking on underlined text as well as element names.

Downloads