Loaf.js 
Loaf creates virtual "sections" of DOM elements - a sort of document fragment that can be referenced anytime it's attached to the DOM. Loaf is used in:
- mojo.js - javascript framework
- paperclip.js - template engine.
Input:
<!-- give loaf something to look for --> Bundle:
var helloSection = buttonSection = buttonElement; // add multiple items - this demonstrates how multiple nodes are controlled by one// sectionhelloSection;helloSection; // setup the button which toggles the message visibilitybuttonSection; // create a toggle for the "Hello World!" message.; // convert the sections into controlled document fragments.;;Output:
Hello World! Toggle Message Visibility Here's a live example: http://jsfiddle.net/4L8wy/1/. Be sure to inspect the DOM as you're toggling the message visibility!
API
section loaf(nodeFactory = document)
creates a new block of dom elements
section.replace(node)
inserts as child at the end of the target node.
section.hide()
hides the section - replaces all bundled nodes with a placeholder node
section.show()
displays the section if it's hidden
section.append(children...)
appends a node to the section
section.prepend(children...)
prepends a node to the section
section.replaceChildNodes(children...)
disposes the loaf
section.toFragment()
returns the section as a document fragment
section.dispose()
removes all child nodes
section.getChildNodes()
returns an array of the child nodes
section.start
the start marker for the section
section.end
the stop marker for the section