xontent

Xontent

HTML templates - capture children or siblings into a document fragment and get it back later.

Quick use

Suppose you have this HTML:

<div id="foo">
  <span>foo</span>
  bar
  <span>baz</span>
</div>

When you call $('#foo').xontent() first time, the contents of the div is removed, inserted into DocumentFragment and this DocumentFragment is return wrapped in jQuery object.

All subsequent calls to $('#foo').xontent() will return that same DocumentFragment inside a jQuery object.

<template> tag

This look like HTML5 template tag - it was in fact started from Brain Blakely's polyfill of <template> tag. Xontent adopts content property of working template tag; so you can use $('#mytemplate').xontent() as the polyfill - in case of <template> not yet working in your browser, it will just grab its contents and puts it into a DocumentFragment just as for any other element.

Advanced use

Beyond polyfilling template tag (and allowing its functionality to any tag), Xontent allows specifying what content should $el.xontent() grab and remember and subsequenty, return. By default, it is the contents / .content, but you can use data-xontent attribute to specify a few more options:

• data-xontent="see selector" When you use this form, $(selector).xontent() is adopted and returned by subsequent calls;
• data-xontent="until selector" When you use this form, all following siblings of an element until hitting selector are removed and inserted into a DocumentFragment. This is much like the jQuery nextUntil call, but it misses text nodes, while Xontent includes every single sibling. If selector is not present among the following siblings, all siblings until the end of parent element are grabbed;
• Any other form of data-xontent uses the default (take the contents or .content in case of <template>).

Setting xontent (new in 0.1.0)

You can call $('#foo').xontent('set', payload) to set the payload which $('#foo').xontent() will return. The payload may be a DocumentFragment itself, or a jQuery object that encapsulates it.

AMD (new in 0.1.2)

You can load xontent with AMD loader such as requirejs. If loaded via AMD, xontent installs itself to AMD-loaded jQuery.