<div id="content">
<input id="testinput" value="testing123..." type="text" /></div>
var domElement = function(selector) {
  this.selector = selector || null;
  this.element = null;
};
domElement.prototype.init = function() {
  switch (this.selector[0]) {
    case '<':
      var matches = this.selector.match(/<([\w-]*)>/);
      if (matches === null || matches === undefined) {
        throw 'Invalid Selector / Node';
        return false;
      }
      var nodeName = matches[0].replace('<', '').replace('>', '');
      this.element = document.createElement(nodeName);
      break;
    default:
      this.element = document.querySelector(this.selector);
  }
};
domElement.prototype.on = function(event, callback) {
  var evt = this.eventHandler.bindEvent(event, callback, this.element);
}
domElement.prototype.off = function(event) {
  var evt = this.eventHandler.unbindEvent(event, this.element);
}
domElement.prototype.val = function(newVal) {
  return (newVal !== undefined ? this.element.value = newVal : this.element.value);
};
domElement.prototype.append = function(html) {
  this.element.innerHTML = this.element.innerHTML + html;
};
domElement.prototype.prepend = function(html) {
  this.element.innerHTML = html + this.element.innerHTML;
};
domElement.prototype.html = function(html) {
  if (html === undefined) {
    return this.element.innerHTML;
  }
  this.element.innerHTML = html;
};
domElement.prototype.eventHandler = {
  events: [],
  bindEvent: function(event, callback, targetElement) {
    this.unbindEvent(event, targetElement);
    targetElement.addEventListener(event, callback, false);
    this.events.push({
      type: event,
      event: callback,
      target: targetElement
    });
  },
  findEvent: function(event) {
    return this.events.filter(function(evt) {
      return (evt.type === event);
    }, event)[0];
  },
  unbindEvent: function(event, targetElement) {
    var foundEvent = this.findEvent(event);
    if (foundEvent !== undefined) {
      targetElement.removeEventListener(event, foundEvent.event, false);
    }
    this.events = this.events.filter(function(evt) {
      return (evt.type !== event);
    }, event);
  }
};
$ = function(selector) {
    var el = new domElement(selector);
    el.init();
    return el;
}
  ///RUN TIME

var a = $('<div>');
document.getElementById('content').appendChild(a.element);
a.html('This div was created with the selector and this content was added with .html()');
$('#content').append('The value of #testinput is' + $('#testinput').val() + ' change the value to see thee bound event.');
$('#content').prepend('<p>Im prepended</p>');
$('#content').append('<p>Im appended</p>');
$('#testinput').on('change',function(){alert("The value of #testinput changed");})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.