simple-html-dom (and its super class simple-xml) is a library included with js-xml-literal intended for use in server-side applications. It makes generating webpages on the server and sending them to a browser very easy and straightforward.

A Node is just an element with a tagName. For instance var anchor = <span /> would create a span node. Nodes can have children, and can have a single parent.

Most of your favorite basic DOM methods are supported: insertBefore, replaceChild, removeChild, appendChild, cloneNode, hasChildNodes, getAttribute, getAttributeNS, setAttribute, and setAttributeNS.

Standard XML accessors are supported: nodeName, nodeValue, nodeType, childNodes, firstChild, lastChild, parentNode, previousSibling, nextSibling, attributes, namespaceURI, tagName, nodeName, and namespaceURI.

And standard HTML attribute accessors as well: className, style, href, and many more.

More advanced methods like querySelector are not supported. This is intentional to encourage generating a complete document the first time, instead of "fixing up" documents before sending them to the user.

Document fragments, while very useful, are an often overlooked feature in most browsers (IE5.5+ included). Essentially a fragment is a temporary container for DOM elements. They can contain child nodes, but may have no parent. When you append a document fragment to another node, the fragment's children are removed from the fragment, and added to the parent. You can create a fragment with <>...</>.

Document fragments support many of the standard Node properties like the firstChild, childNodes, etc.

Example:

function generateListItems() {
  var links = {
    'https://github.com': 'GitHub',
    'https://www.facebook.com': 'Facebook',
    'https://www.gmail.com': 'GMail'
  };
  var frag = <></>;
  for (var uri in links) {
    frag.appendChild(<li><a href={uri}>{links[uri]}</a></li>);
  }
  return frag;
}
var list = <ul>{generateListItems()}</ul>;

Text elements work just like they do in browsers. There's no way to directly create a text node, however with XML literals there's generally no need to manually create one. A text node will be generated any time an XML literal contains text:

var hello = <span>Hello</span>;
hello.firstChild; // here's your text node

Text nodes support the properties: data, length, nodeValue. They also support the methods: appendData, deleteData, insertData, replaceData, and substringData.

simple-html-dom also has full namespace support. You can create a namespaced element with the standard xmlns syntax:

var node = <my:thing xmlns:my="//my-things" />;
// node.namespaceURI == '//my-things';

It can be cumbersome to always have to type out your namespace URI, so js-xml-literal allows you to register global prefixes and their namespaces:

XMLEnvironment.registerPrefix('my', '//my-things');

Don't overlook the power of namespaces! For instance I built a quick library on top of simple-html-dom which can decompose more complex custom elements into HTML widgets. For instance something like:

<my:tabs>
<my:tab>Home</my:tab>
<my:tab>Messages</my:tab>
<my:tab>Images</my:tab>
</my:tabs>

These could be decomposed into <div />'s or <li />'s or whatever makes the most sense.