.gitignore

node_modules
node_modules/*
npm-debug.log

index.html

<div>
<div>
<h1>
h
</h1>
</div>
<div>
<ul>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
</div>
<h2>
content title
</h2>
<p>
so it&quot;s just like a templating engine,

but easy to use inline with javascript

</p>
<p>
the intension is for this to be used to create

reusable, interactive html widgets. 
</p>
</div>

index.js

global.Document = Document
global.Node     = Node
global.Element  = Element
global.Text     = Text
global.document = new Document()

function Document() {}

Document.prototype.createTextNode = function(v) {
    var n = new Text();
    n.value = v;
    return n;
}

Document.prototype.createElement = function(nodeName) {
    var el = new Element();
    el.nodeName = nodeName;
    return el;
}

function Node () {}

Text.prototype = new Node()
Element.prototype = new Node()

function Style () {

}

Style.prototype.setProperty = function (k,v) {
  this[k] = v
}

function Element() {
    this.classList = []
    this.classList.add = this.classList.push.bind(this.classList);
    this.style = new Style
    this.childNodes = [];
}

Element.prototype.appendChild = function(child) {
    child.parentElement = this;
    this.childNodes.push(child);
}

Element.prototype.setAttribute = function (k, v) {
  this[k] = v
}

Element.prototype.replaceChild = function(newChild, oldChild) {
    var self = this;
    this.childNodes.forEach(function(child, index){
        if (child === oldChild)
        self.childNodes[index] = newChild;
    });
}

Element.prototype.toString = function () {
  var a = []
  a.push('<'+this.nodeName+'>')
  this.childNodes.forEach(function (e) {
    a.push(e.toString())
  })
  a.push('</'+this.nodeName+'>')
  return a.join('\n')
}

function escapeHTML(s) {
  return String(s)
      .replace(/&/g, '&amp;')
      .replace(/"/g, '&#x27;')
      .replace(/'/g, '&quot;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;');
  }

function Text(){}

Text.prototype.toString = function() {
    return escapeHTML(this.value);
}

package.json

{
"name": "html-element",
"version" : "0.0.0"
}

test.js

require('./')
var h = require('hyperscript')
var html = 
h('div#page',
  h('div#header',
    h('h1.classy', 'h', { style: {'background-color': '#22f'} })),
  h('div#menu', { style: {'background-color': '#2f2'} },
    h('ul',
      h('li', 'one'),
      h('li', 'two'),
      h('li', 'three'))),
    h('h2', 'content title',  { style: {'background-color': '#f22'} }),
    h('p', 
      "so it's just like a templating engine,\n",
      "but easy to use inline with javascript\n"),
    h('p', 
      "the intension is for this to be used to create\n",
      "reusable, interactive html widgets. "))

console.log(html.toString())