Cleanup and simplify JS code

Change-Id: I393e22763c1a1d18878026bf459b747b150429fb
diff --git a/dev/js/spec/vcSpec.js b/dev/js/spec/vcSpec.js
index 4f7c7dc..89bd897 100644
--- a/dev/js/spec/vcSpec.js
+++ b/dev/js/spec/vcSpec.js
@@ -607,7 +607,7 @@
       expect(docGroup.getOperand(1).ldType()).toEqual("non");
 
       var op = docGroup.getOperand(1).element().lastChild;
-      expect(op.getAttribute('class')).toEqual('operators');
+      expect(op.getAttribute('class')).toEqual('operators button-group');
       expect(op.children[0].getAttribute('class')).toEqual('delete');
       expect(op.children.length).toEqual(1);
 
@@ -618,7 +618,7 @@
       expect(docGroup.getOperand(1).value()).toEqual("");
 
       op = docGroup.getOperand(1).element().lastChild;
-      expect(op.getAttribute('class')).toEqual('operators');
+      expect(op.getAttribute('class')).toEqual('operators button-group');
       expect(op.children[0].getAttribute('class')).toEqual('and');
       expect(op.children[1].getAttribute('class')).toEqual('or');
       expect(op.children[2].getAttribute('class')).toEqual('delete');
@@ -648,7 +648,7 @@
       expect(vc.root().ldType()).toEqual("doc");
 
       op = vc.root().element().lastChild;
-      expect(op.getAttribute('class')).toEqual('operators');
+      expect(op.getAttribute('class')).toEqual('operators button-group');
       expect(op.children[0].getAttribute('class')).toEqual('and');
       expect(op.children[1].getAttribute('class')).toEqual('or');
       expect(op.children[2].getAttribute('class')).toEqual('delete');
@@ -776,7 +776,7 @@
 
       expect(e.children[0].getAttribute('class')).toEqual('doc');
       var docop = e.children[0].lastChild;
-      expect(docop.getAttribute('class')).toEqual('operators');
+      expect(docop.getAttribute('class')).toEqual('operators button-group');
       expect(docop.children[0].getAttribute('class')).toEqual('and');
       expect(docop.children[1].getAttribute('class')).toEqual('or');
       expect(docop.children[2].getAttribute('class')).toEqual('delete');
@@ -786,13 +786,13 @@
 
       // This and-operation can be "or"ed or "delete"d
       var secop = e.children[1].children[2];
-      expect(secop.getAttribute('class')).toEqual('operators');
+      expect(secop.getAttribute('class')).toEqual('operators button-group');
       expect(secop.children[0].getAttribute('class')).toEqual('or');
       expect(secop.children[1].getAttribute('class')).toEqual('delete');
 
       // This or-operation can be "and"ed or "delete"d
-      expect(e.children[2].getAttribute('class')).toEqual('operators');
-      expect(e.lastChild.getAttribute('class')).toEqual('operators');
+      expect(e.children[2].getAttribute('class')).toEqual('operators button-group');
+      expect(e.lastChild.getAttribute('class')).toEqual('operators button-group');
       expect(e.lastChild.children[0].getAttribute('class')).toEqual('and');
       expect(e.lastChild.children[1].getAttribute('class')).toEqual('delete');
     });
@@ -944,8 +944,8 @@
       expect(dg.getAttribute('class')).toEqual('docGroup');
       expect(dg.children[0].getAttribute('class')).toEqual('doc');
       expect(dg.children[1].getAttribute('class')).toEqual('doc');
-      expect(dg.children[2].getAttribute('class')).toEqual('operators');
-      expect(vc.element().firstChild.children[2].getAttribute('class')).toEqual('operators');
+      expect(dg.children[2].getAttribute('class')).toEqual('operators button-group');
+      expect(vc.element().firstChild.children[2].getAttribute('class')).toEqual('operators button-group');
     });    
 
     it('should be modifiable by deletion in flat docGroups', function () {
@@ -1205,7 +1205,7 @@
       expect(op.del()).toBeTruthy();
 
       var e = op.element();
-      expect(e.getAttribute('class')).toEqual('operators');
+      expect(e.getAttribute('class')).toEqual('operators button-group');
       expect(e.children[0].getAttribute('class')).toEqual('or');
       expect(e.children[0].firstChild.data).toEqual('or');
       expect(e.children[1].getAttribute('class')).toEqual('delete');
@@ -1216,7 +1216,7 @@
       op.update();
 
       e = op.element();
-      expect(e.getAttribute('class')).toEqual('operators');
+      expect(e.getAttribute('class')).toEqual('operators button-group');
       expect(e.children[0].getAttribute('class')).toEqual('and');
       expect(e.children[0].firstChild.data).toEqual('and');
       expect(e.children[1].getAttribute('class')).toEqual('or');
@@ -1264,7 +1264,7 @@
 	"type": 'type:date'
       });
       expect(vc.root().toQuery()).toEqual('pubDate in 2014-12-05');
-      expect(vc.root().element().lastChild.getAttribute('class')).toEqual('operators');
+      expect(vc.root().element().lastChild.getAttribute('class')).toEqual('operators button-group');
 
       // Clean with delete from root
       expect(vc.root().element().lastChild.lastChild.getAttribute('class')).toEqual('delete');
@@ -1440,7 +1440,7 @@
 
       // Operands and operators
       expect(vc.element().firstChild.children.length).toEqual(4);
-      expect(vc.element().firstChild.lastChild.getAttribute('class')).toEqual('operators');
+      expect(vc.element().firstChild.lastChild.getAttribute('class')).toEqual('operators button-group');
 
       // Remove inner group and flatten
       _delOn(vc.root().getOperand(2).getOperand(0));
@@ -1453,7 +1453,7 @@
 
       // Operands and operators
       expect(vc.element().firstChild.children.length).toEqual(5);
-      expect(vc.element().firstChild.lastChild.getAttribute('class')).toEqual('operators');
+      expect(vc.element().firstChild.lastChild.getAttribute('class')).toEqual('operators button-group');
     });
   });
 
@@ -1515,7 +1515,7 @@
       var fc = vc.element().firstChild;
       expect(fc.getAttribute('data-operation')).toEqual('and');
       expect(fc.children.length).toEqual(3);
-      expect(fc.lastChild.getAttribute('class')).toEqual('operators');
+      expect(fc.lastChild.getAttribute('class')).toEqual('operators button-group');
       expect(fc.children[0].getAttribute('class')).toEqual('doc');
       expect(fc.children[1].getAttribute('class')).toEqual('doc');
 
@@ -1526,7 +1526,7 @@
       fc = vc.element().firstChild;
       expect(fc.getAttribute('data-operation')).toEqual('and');
       expect(fc.children.length).toEqual(4);
-      expect(fc.lastChild.getAttribute('class')).toEqual('operators');
+      expect(fc.lastChild.getAttribute('class')).toEqual('operators button-group');
 
       expect(fc.children[0].getAttribute('class')).toEqual('doc');
       expect(fc.children[1].getAttribute('class')).toEqual('doc unspecified');
@@ -1559,7 +1559,7 @@
 
       var fc = vc.element().firstChild;
       expect(fc.children.length).toEqual(3);
-      expect(fc.lastChild.getAttribute('class')).toEqual('operators');
+      expect(fc.lastChild.getAttribute('class')).toEqual('operators button-group');
       expect(fc.children[0].getAttribute('class')).toEqual('doc');
       expect(fc.children[1].getAttribute('class')).toEqual('doc');
 
@@ -1573,15 +1573,15 @@
       expect(fc.children[0].getAttribute('class')).toEqual('docGroup');
       expect(fc.children[0].getAttribute('data-operation')).toEqual('or');
       expect(fc.children[1].getAttribute('class')).toEqual('doc');
-      expect(fc.children[2].getAttribute('class')).toEqual('operators');
-      expect(fc.lastChild.getAttribute('class')).toEqual('operators');
+      expect(fc.children[2].getAttribute('class')).toEqual('operators button-group');
+      expect(fc.lastChild.getAttribute('class')).toEqual('operators button-group');
 
       fc = vc.element().firstChild.firstChild;
       expect(fc.children.length).toEqual(3);
       expect(fc.children[0].getAttribute('class')).toEqual('doc');
       expect(fc.children[1].getAttribute('class')).toEqual('doc unspecified');
-      expect(fc.children[2].getAttribute('class')).toEqual('operators');
-      expect(fc.lastChild.getAttribute('class')).toEqual('operators');
+      expect(fc.children[2].getAttribute('class')).toEqual('operators button-group');
+      expect(fc.lastChild.getAttribute('class')).toEqual('operators button-group');
     });
 
     it('should add new unspecified doc with "and" before group', function () {
diff --git a/dev/js/src/api.js b/dev/js/src/api.js
index 2767015..89534be 100644
--- a/dev/js/src/api.js
+++ b/dev/js/src/api.js
@@ -18,11 +18,11 @@
     // match is a KorAP.Match object
     var url = KorAP.URL;
     url += '/corpus';
-/*
-    url += '/' + match.corpusID;
-    url += '/' + match.docID;
-    url += '/' + match.textID;
-*/
+    /*
+      url += '/' + match.corpusID;
+      url += '/' + match.docID;
+      url += '/' + match.textID;
+    */
 
     var legacySigle = new RegExp('^([^_]+)_([^\\.]+)\\.(.+?)$');
 
@@ -55,6 +55,7 @@
     KorAP.API.getJSON(url, cb);
   };
 
+
   /**
    * Retrieve information about collections
    */
@@ -62,6 +63,7 @@
     KorAP.API.getJSON(KorAP.URL + '/collection', cb);
   };
 
+
   /**
    * General method to retrieve JSON information
    */
@@ -72,12 +74,12 @@
     req.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
     req.onreadystatechange = function () {
       /*
-	States:
-	0 - unsent (prior to open)
-	1 - opened (prior to send)
-	2 - headers received
-	3 - loading (responseText has partial data)
-	4 - done
+	      States:
+	      0 - unsent (prior to open)
+	      1 - opened (prior to send)
+	      2 - headers received
+	      3 - loading (responseText has partial data)
+	      4 - done
       */
       if (this.readyState == 4) {
 
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index fe9e97d..f11db3c 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -76,12 +76,14 @@
       this.store();
     },
 
+    
     store : function () {
       if (this._click !== undefined)
         this._click(this._selected);
       else 
         console.dir(this._selected);
     },
+
     
     /**
      * Set the action for clicking as a callback.
@@ -99,6 +101,7 @@
       return this._input;
     },
     
+
     /**
      * Show the datepicker.
      * Will either show the selected year/month
@@ -167,7 +170,7 @@
 
       // Create element
       // Add input field
-      var input = document.createElement('input');
+      var input = d.createElement('input');
       input.value = this.toString();
       input.setAttribute('tabindex', 0);
 
@@ -205,6 +208,7 @@
       return this._element;
     },
 
+
     /**
      * Get the current date in string format.
      */
@@ -218,6 +222,7 @@
       return str;
     },
 
+
     toString : function () {
       // There are values selected
       var v = '';
@@ -236,6 +241,7 @@
       return v;
     },
 
+
     /**
      * Increment the year.
      */
@@ -307,11 +313,11 @@
       year.classList.add('year');
 
       // Decrement year
-      year.appendChild(d.createElement('span'))
+      year.addE('span')
         .onclick = this.decrYear.bind(this);
 
-      this._yElement = year.appendChild(d.createElement('span'));
-      this._yElement.appendChild(document.createTextNode(this._showYear));
+      this._yElement = year.addE('span');
+      this._yElement.addT(this._showYear);
 
       this._yElement.onclick = function () {
         this.set(this._showYear);
@@ -319,7 +325,7 @@
       this._selectYear();
 
       // Increment year
-      year.appendChild(d.createElement('span'))
+      year.addE('span')
         .onclick = this.incrYear.bind(this);
 
       return year;
@@ -347,13 +353,11 @@
       month.classList.add('month');
 
       // Decrement month
-      month.appendChild(d.createElement('span'))
+      month.addE('span')
         .onclick = this.decrMonth.bind(this);
       
-      this._mElement = month.appendChild(d.createElement('span'));
-      this._mElement.appendChild(
-        document.createTextNode(loc.MONTH[this._showMonth-1])
-      );
+      this._mElement = month.addE('span');
+      this._mElement.addT(loc.MONTH[this._showMonth-1]);
       this._mElement.onclick = function () {
         this.set(this._showYear, this._showMonth);
       }.bind(this);
@@ -361,7 +365,7 @@
       this._selectMonth();
       
       // Increment month
-      month.appendChild(d.createElement('span'))
+      month.addE('span')
         .onclick = this.incrMonth.bind(this);
 
       return month;
@@ -392,11 +396,9 @@
       var table = d.createElement('table');
 
       // Localized day view
-      var tr = table.appendChild(d.createElement('thead'))
-          .appendChild(d.createElement('tr'));
+      var tr = table.addE('thead').addE('tr');
       for (var i = 0; i < 7; i++) {
-        tr.appendChild(d.createElement('th'))
-          .appendChild(d.createTextNode(loc.WDAY[i]));
+        tr.addE('th').addT(loc.WDAY[i]);
       };
 
       this._dBElement = this._dayBody();
@@ -448,9 +450,9 @@
       while (1) {
 
         // Loop through the week
-        var tr = tb.appendChild(d.createElement('tr'));
+        var tr = tb.addE('tr');
         for (var i = 0; i < 7; i++) {
-          var td = tr.appendChild(d.createElement('td'));
+          var td = tr.addE('td');
           
           // Not part of the current month
           if (date.getMonth() !== showDate.getMonth()) {
@@ -477,9 +479,7 @@
           };
 
           // Add the current day to the table
-          td.appendChild(
-            d.createTextNode(date.getDate())
-          );
+          td.addT(date.getDate());
     
           // Next day
           date.setDate(date.getDate() + 1);
diff --git a/dev/js/src/hint/foundries.js b/dev/js/src/hint/foundries.js
index 67a6a88..8ece056 100644
--- a/dev/js/src/hint/foundries.js
+++ b/dev/js/src/hint/foundries.js
@@ -3,7 +3,7 @@
 
 define(function () {
 
-  var ah = KorAP.annotationHelper;
+  const ah = KorAP.annotationHelper;
 
   ah["getDesc"] = function (foundryLayer, value) {
 
diff --git a/dev/js/src/hint/item.js b/dev/js/src/hint/item.js
index 66819c6..c39c3c2 100644
--- a/dev/js/src/hint/item.js
+++ b/dev/js/src/hint/item.js
@@ -1,7 +1,7 @@
 /**
  * Hint menu item based on MenuItem
  */
-define(['menu/item'], function (itemClass) {
+define(['menu/item', 'util'], function (itemClass) {
   return {
 
     /**
@@ -100,7 +100,7 @@
 
       // Create title
       var name =  document.createElement("span");
-      name.appendChild(document.createTextNode(this._name));
+      name.addT(this._name);
       
       li.appendChild(name);
 
@@ -108,7 +108,7 @@
       if (this._desc !== undefined) {
 	      var desc = document.createElement("span");
 	      desc.classList.add('desc');
-	      desc.appendChild(document.createTextNode(this._desc));
+	      desc.addT(this._desc);
 	      li.appendChild(desc);
       };
       return this._element = li;
diff --git a/dev/js/src/hint/lengthField.js b/dev/js/src/hint/lengthField.js
index 0662b89..541b917 100644
--- a/dev/js/src/hint/lengthField.js
+++ b/dev/js/src/hint/lengthField.js
@@ -1,4 +1,4 @@
-define(['menu/lengthField'], function (lengthFieldClass) {
+define(['menu/lengthField', 'util'], function (lengthFieldClass) {
   return {
 
     /**
@@ -6,19 +6,18 @@
      */
     create : function () {
       return Object.create(lengthFieldClass).
-	upgradeTo(this)._init();
+	      upgradeTo(this)._init();
     },
 
     /**
      * Override the prefix action.
      */
     add : function (param) {
-      this._element.appendChild(document.createElement('span'))
-	.appendChild(document.createTextNode(param[0] + '--'));
+      this._element.addE('span').addT(param[0] + '--');
 
-      var desc = this._element.appendChild(document.createElement('span'));
+      var desc = this._element.addE('span');
       desc.classList.add("desc");
-      desc.appendChild(document.createTextNode(param[2] + '--'));
+      desc.addT(param[2] + '--');
       this._element.appendChild(desc);
     }
   };
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index d842a1b..370e14d 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -37,12 +37,13 @@
              selectMenuClass) {
 
   // Localization values
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
   loc.VC_allCorpora    = loc.VC_allCorpora    || 'all corpora';
   loc.VC_oneCollection = loc.VC_oneCollection || 'a virtual corpus';
   loc.TOGGLE_ALIGN     = loc.TOGGLE_ALIGN     || 'toggle alignment';
   loc.SHOW_KQ          = loc.SHOW_KQ          || 'show KoralQuery';
 
+  const d = document;
 
   // Override KorAP.log
   window.alertify = alertifyClass;
@@ -79,10 +80,10 @@
      * Replace Virtual Collection field
      */
     var vcname, vcchoose;
-    var input = document.getElementById('collection');
+    var input = d.getElementById('collection');
     if (input) {
       input.style.display = 'none';
-      vcname = document.createElement('span');
+      vcname = d.createElement('span');
       vcname.setAttribute('id', 'vc-choose');
       vcname.classList.add('select');
 
@@ -91,12 +92,10 @@
         currentVC = loc.VC_oneCollection;
       };
 
-      vcchoose = vcname.appendChild(document.createElement('span'));
+      vcchoose = vcname.addE('span');
 
-      vcchoose.appendChild(
-        document.createTextNode(
-          document.getElementById('collection-name').value || currentVC
-        )
+      vcchoose.addT(
+        d.getElementById('collection-name').value || currentVC
       );
 
       input.parentNode.insertBefore(vcname, input);
@@ -105,7 +104,7 @@
     /**
      * Add actions to match entries
      */
-    var inactiveLi = document.querySelectorAll(
+    var inactiveLi = d.querySelectorAll(
       '#search > ol > li:not(.active)'
     );
     var i = 0;
@@ -139,7 +138,7 @@
     };
 
     // Add focus listener to aside
-    var aside = document.getElementsByTagName('aside')[0];
+    var aside = d.getElementsByTagName('aside')[0];
 
     if (aside && aside.classList.contains('active') == false) {
 
@@ -152,7 +151,7 @@
       });
 
       // Deactivate focus when clicking anywhere else
-      var body = document.getElementsByTagName('body')[0];
+      var body = d.getElementsByTagName('body')[0];
       if (body !== null) {
         body.addEventListener('click', function() {
           if (!asideClicked) {
@@ -174,23 +173,23 @@
 
       
     // Replace QL select menus with KorAP menus
-    var qlField = document.getElementById('ql-field');
+    var qlField = d.getElementById('ql-field');
     if (qlField !== null) {
       KorAP.QLmenu = selectMenuClass.create(
-        document.getElementById('ql-field').parentNode
+        d.getElementById('ql-field').parentNode
       ).limit(5);
     };
 
-    var result = document.getElementById('resultinfo');
+    var result = d.getElementById('resultinfo');
     var resultButton = null;
     var leftButton = null;
     if (result != null) {
 
       // Add right buttons
-      resultButton = result.appendChild(document.createElement('div'));
+      resultButton = result.addE('div');
       resultButton.classList.add('result', 'button');
 
-      leftButton =  result.appendChild(document.createElement('div'));
+      leftButton =  result.addE('div');
       leftButton.classList.add('result', 'button', 'left');
     };
 
@@ -199,23 +198,23 @@
 
       if (resultButton !== null) {
         var kq;
-        var toggle = document.createElement('a');
+        var toggle = d.createElement('a');
         toggle.setAttribute('title', loc.SHOW_KQ)
         toggle.classList.add('show-kq', 'button');
-        toggle.appendChild(document.createElement('span'))
-          .appendChild(document.createTextNode(loc.SHOW_KQ));
+        toggle.addE('span')
+          .addT(loc.SHOW_KQ);
         resultButton.appendChild(toggle);
 
         var showKQ = function () {
           if (kq === undefined) {
-            kq = document.createElement('div');
+            kq = d.createElement('div');
             kq.setAttribute('id', 'koralquery');
             kq.style.display = 'none';
-            var kqInner = document.createElement('div');
+            var kqInner = d.createElement('div');
             kq.appendChild(kqInner);
             kqInner.innerHTML = JSON.stringify(KorAP.koralQuery, null, '  ');
             hljs.highlightBlock(kqInner);
-            var sb = document.getElementById('search');
+            var sb = d.getElementById('search');
             sb.insertBefore(kq, sb.firstChild);
           };
 
@@ -270,7 +269,7 @@
          */
         // querySelector('div.button.right');
         
-        var toggle = document.createElement('a');
+        var toggle = d.createElement('a');
         toggle.setAttribute('title', loc.TOGGLE_ALIGN);
         // Todo: Reuse old alignment from query
         var cl = toggle.classList;
@@ -278,25 +277,24 @@
         toggle.addEventListener(
           'click',
           function (e) {
-            var ol = document.querySelector('#search > ol');
+            var ol = d.querySelector('#search > ol');
             ol.toggleClass("align-left", "align-right");
             this.toggleClass("left", "right");
           });
-        toggle.appendChild(document.createElement('span'))
-          .appendChild(document.createTextNode(loc.TOGGLE_ALIGN));
+        toggle.addE('span').addT(loc.TOGGLE_ALIGN);
         resultButton.appendChild(toggle);
       };
 
       // Not ready yet
       /*
       if (leftButton !== null) {
-        var metaInfo = document.createElement('a');
+        var metaInfo = d.createElement('a');
         metaInfo.setAttribute('title', loc.SHOW_META)
 
         var cl = metaInfo.classList;
         cl.add('show-meta', 'button');
-        metaInfo.appendChild(document.createElement('span'))
-          .appendChild(document.createTextNode(loc.SHOW_META));
+        metaInfo.appendChild(d.createElement('span'))
+          .appendChild(d.createTextNode(loc.SHOW_META));
         leftButton.appendChild(metaInfo);
       };
       */
@@ -308,7 +306,7 @@
     if (vcname) {
       var vc;
       var vcclick = function () {
-        var view = document.getElementById('vc-view');
+        var view = d.getElementById('vc-view');
 
         // The vc is visible
         if (vcname.classList.contains('active')) {
@@ -344,9 +342,9 @@
     /**
      * Init Tutorial view
      */
-    if (document.getElementById('view-tutorial')) {
+    if (d.getElementById('view-tutorial')) {
       window.tutorial = tutClass.create(
-        document.getElementById('view-tutorial'),
+        d.getElementById('view-tutorial'),
         session
       );
       obj.tutorial = window.tutorial;
@@ -357,22 +355,22 @@
       obj.tutorial = window.parent.tutorial;
     };
 
-    // Initialize queries for document
+    // Initialize queries for d
     if (obj.tutorial) {
-      obj.tutorial.initQueries(document);
+      obj.tutorial.initQueries(d);
 
       // Initialize documentation links
-      obj.tutorial.initDocLinks(document);
+      obj.tutorial.initDocLinks(d);
     };
 
 
     /**
      * Add VC creation on submission.
      */
-    var form = document.getElementById('searchform');
+    var form = d.getElementById('searchform');
     if (form !== null) {
       form.addEventListener('submit', function (e) {
-        var qf = document.getElementById('q-field');
+        var qf = d.getElementById('q-field');
 
         // No query was defined
         if (qf.value === undefined || qf.value === '') {
diff --git a/dev/js/src/loc/de.js b/dev/js/src/loc/de.js
index 537e5b2..631c55e 100644
--- a/dev/js/src/loc/de.js
+++ b/dev/js/src/loc/de.js
@@ -1,5 +1,5 @@
 define(function () {
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
   loc.OR = 'oder';
   loc.AND = 'und';
   // EMPTY, DELETE
diff --git a/dev/js/src/match.js b/dev/js/src/match.js
index e70d975..18052ec 100644
--- a/dev/js/src/match.js
+++ b/dev/js/src/match.js
@@ -16,14 +16,16 @@
 ], function (infoClass,matchTreeMenuClass) { //, refClass) {
 
   // Localization values
-  var loc   = KorAP.Locale;
+  const loc   = KorAP.Locale;
   loc.ADDTREE   = loc.ADDTREE   || 'Add tree view';
   loc.SHOWINFO  = loc.SHOWINFO  || 'Show information';
   loc.CLOSE     = loc.CLOSE     || 'Close';
   loc.SHOW_META = loc.SHOW_META || 'Show metadata';
   
   // 'corpusID', 'docID', 'textID'
-  var _matchTerms  = ['textSigle', 'matchID', 'available'];
+  const _matchTerms  = ['textSigle', 'matchID', 'available'];
+
+  const d = document;
 
   /**
    * Match object
@@ -163,7 +165,7 @@
         return true;
 
       // Create action buttons
-      var ul = document.createElement('ul');
+      var ul = d.createElement('ul');
       ul.classList.add('action', 'right');
 
       element.appendChild(ul);
@@ -172,9 +174,8 @@
       // Todo: Open in new frame
 
       // Add close button
-      var close = document.createElement('li');
-      close.appendChild(document.createElement('span'))
-        .appendChild(document.createTextNode(loc.CLOSE));
+      var close = d.createElement('li');
+      close.addE('span').addT(loc.CLOSE);
       close.classList.add('close');
       close.setAttribute('title', loc.CLOSE);
       
@@ -183,28 +184,25 @@
       // Add meta button
       var refLine = element.querySelector("p.ref");
 
+      // No reference found
       if (!refLine)
         return;
       
-      // TODO: Simplify
-      var ops = document.createElement('div');
+      var ops = d.createElement('div');
       ops.classList.add('action', 'bottom', 'button-group');
       
-      var meta = document.createElement('span');
-      ops.appendChild(meta);
-      meta.appendChild(document.createTextNode('Meta'));
+      var meta = ops.addE('span');
+      meta.addT('Meta');
       meta.setAttribute('title', loc.SHOW_META);
       meta.classList.add('meta');
 
-      var info = document.createElement('span');
-      ops.appendChild(info);
-      info.appendChild(document.createTextNode('Anno'));
+      var info = ops.addE('span');
+      info.addT('Anno');
       info.setAttribute('title', loc.SHOWINFO);
       info.classList.add('info');
 
-      var tree = document.createElement('span');
-      ops.appendChild(tree);
-      tree.appendChild(document.createTextNode('+ Tree'));
+      var tree = ops.addE('span');
+      tree.addT('+ Tree');
       tree.setAttribute('title', loc.ADDTREE);
       tree.classList.add('tree');
 
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 07d4550..43319e2 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -22,7 +22,8 @@
     return {};
   };
 
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
+  const d = document;
 
   return {
 
@@ -206,7 +207,7 @@
      * Add a new tree view to the list
      */
     showTree : function (foundry, layer, type, cb) {
-      var matchtree = document.createElement('div');
+      var matchtree = d.createElement('div');
       matchtree.classList.add('matchtree');
 
       // Add title line
@@ -253,14 +254,14 @@
 
           // This is currently not supported by relations
           if (type === "spans") {
-            var dl = document.createElement('li');
+            var dl = d.createElement('li');
             dl.className = 'download';
             dl.addEventListener(
               'click', function (e) {
                 var a = treeObj.downloadLink();
-                document.body.appendChild(a);
+                d.body.appendChild(a);
                 a.click();
-                document.body.removeChild(a)
+                d.body.removeChild(a)
                 e.halt();
               }
             );
@@ -279,7 +280,7 @@
 
     // Add meta information to match
     showMeta : function () {
-      var matchmeta = document.createElement('div');
+      var matchmeta = d.createElement('div');
 
       // TODO: This is part of the getMeta!
       var metaInfo = this._match.element().getAttribute('data-info');
@@ -308,7 +309,7 @@
       var info = this.element();
 
       // Append default table
-      var matchtable = document.createElement('div');
+      var matchtable = d.createElement('div');
       matchtable.classList.add('matchtable', 'loading');
       info.appendChild(matchtable);
 
@@ -337,7 +338,7 @@
         return this._element;
       
       // Create info table
-      var info = document.createElement('div');
+      var info = d.createElement('div');
       info.classList.add('matchinfo');
       
       this._element = info;
diff --git a/dev/js/src/match/meta.js b/dev/js/src/match/meta.js
index 20f0137..33d5461 100644
--- a/dev/js/src/match/meta.js
+++ b/dev/js/src/match/meta.js
@@ -26,7 +26,7 @@
 */
 
   // Localization values
-  var loc   = KorAP.Locale;
+  const loc   = KorAP.Locale;
   loc.METADATA   = loc.METADATA   || 'Metadata';
 
   return {
@@ -76,9 +76,7 @@
       );
       */
 
-      var metaDL = metaTable.appendChild(
-        document.createElement('dl')
-      );
+      var metaDL = metaTable.addE('dl');
 
       this._element = metaTable;
 
@@ -97,17 +95,8 @@
             k !== "layerInfos") {
 
           var metaL = document.createElement('div');
-          metaL.appendChild(
-            document.createElement('dt')
-          ).appendChild(
-            document.createTextNode(k)
-          );
-
-          metaL.appendChild(
-            document.createElement('dd')
-          ).appendChild(
-            document.createTextNode(metaInfo[k])
-          );
+          metaL.addE('dt').addT(k);
+          metaL.addE('dd').addT(metaInfo[k]);
 
           metaDL.appendChild(metaL);
         };
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index 8eccc3b..7c75145 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -12,7 +12,7 @@
    * TODO:
    *   Or-Groups are no longer in use.
    */
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
   loc.NEW_QUERY = loc.NEW_QUERY || 'New Query';
 
   function _getAnnotation (prefix, target) {
@@ -75,13 +75,10 @@
       this._element.className = 'queryfragment';
 
       // Prepend info text
-      this._element.appendChild(document.createElement('span'))
-        .appendChild(document.createTextNode(loc.NEW_QUERY + ':'));
+      this._element.addE('span').addT(loc.NEW_QUERY + ':');
 
       // Append query fragment part
-      this._queryFragment = this._element.appendChild(
-        document.createElement('span')
-      );
+      this._queryFragment = this._element.addE('span');
 
       // Event when the query fragment is clicked
       this._element.addEventListener('click', this.toQueryBar.bind(this), 1);
diff --git a/dev/js/src/match/relations.js b/dev/js/src/match/relations.js
index 4a1ddc2..badbacf 100644
--- a/dev/js/src/match/relations.js
+++ b/dev/js/src/match/relations.js
@@ -7,8 +7,9 @@
 define([], function () {

   "use strict";

 

-  var svgNS = "http://www.w3.org/2000/svg";

-  var _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");

+  const svgNS = "http://www.w3.org/2000/svg";

+  const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");

+  const d = document;

 

   return {

     create : function (snippet) {

@@ -40,7 +41,7 @@
         return this;

 

       // Parse the snippet

-      var html = document.createElement("div");

+      var html = d.createElement("div");

       html.innerHTML = snippet;

 

       // Establish temporary parsing memory

@@ -253,13 +254,13 @@
     

     // This is a shorthand for SVG element creation

     _c : function (tag) {

-      return document.createElementNS(svgNS, tag);

+      return d.createElementNS(svgNS, tag);

     },

 

     // Get bounding box - with workaround for text nodes

     _rect : function (node) {

       if (node.tagName == "tspan" && !navigator.userAgent.match(/Edge/)) {

-        var range = document.createRange();

+        var range = d.createRange();

         range.selectNode(node);

         var rect = range.getBoundingClientRect();

         range.detach();

@@ -399,7 +400,7 @@
       labelE.setAttribute("x", x + middle);

       labelE.setAttribute("y", middleY + 3);

       labelE.setAttribute("text-anchor", "middle");

-      var textNode = document.createTextNode(arc.label);

+      var textNode = d.createTextNode(arc.label);

       labelE.appendChild(textNode);

 

       var labelBox   = labelE.getBBox();

@@ -662,7 +663,7 @@
 

       // Introduce some prepending whitespace (yeah - I know ...)

       var ws = text.appendChild(this._c("tspan"));

-      ws.appendChild(document.createTextNode('\u00A0'));

+      ws.appendChild(d.createTextNode('\u00A0'));

       ws.style.textAnchor = "start";

       

       var lastRight = 0;

@@ -670,7 +671,7 @@
         // Append svg

         // var x = text.appendChild(this._c("text"));

         var tspan = text.appendChild(this._c("tspan"));

-        tspan.appendChild(document.createTextNode(this._tokens[node_i]));

+        tspan.appendChild(d.createTextNode(this._tokens[node_i]));

         tspan.setAttribute("text-anchor", "middle");

         

         this._tokenElements.push(tspan);

diff --git a/dev/js/src/match/table.js b/dev/js/src/match/table.js
index a8ae51d..46f2890 100644
--- a/dev/js/src/match/table.js
+++ b/dev/js/src/match/table.js
@@ -2,9 +2,10 @@
  * Table representation of morphological
  * annotations of a match.
  */
-define(function () {
-  var _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
-  
+define(["util"], function () {
+  const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
+  const d = document;
+
   return {
 
     /**
@@ -18,7 +19,7 @@
     // Initialize table based on snippet
     _init : function (snippet) {
       // Create html for traversal
-      var html = document.createElement("div");
+      var html = d.createElement("div");
       html.innerHTML = snippet;
       
       this._pos = 0;
@@ -148,18 +149,17 @@
         return this._element;
 
       // First the legend table
-      var d = document;
       var table = d.createElement('table');
 
       // Single row in head
-      var tr = table.appendChild(d.createElement('thead'))
-          .appendChild(d.createElement('tr'));
+      var tr = table.addE('thead').addE('tr');
 
       var ah = KorAP.annotationHelper || { "getDesc" : function () {}};
 
       // Add cell to row
       var addCell = function (type, key, value) {        
-        var c = this.appendChild(d.createElement(type))
+        var c = this.addE(type);
+
         if (value === undefined)
           return c;
 
@@ -168,9 +168,7 @@
           // There are multiple values to add
           c.classList.add('matchkeyvalues');
           for (var n = 0; n < value.length; n++) {
-            var text = d.createTextNode(value[n]);
-            var e = c.appendChild(d.createElement('div'));
-            e.appendChild(text);
+            var e = c.addE('div').addT(value[n]);
 
             var anno = ah.getDesc(key, value[n]);
 
@@ -184,7 +182,7 @@
           if (value instanceof Array)
             value = value[0];
 
-          c.appendChild(d.createTextNode(value));
+          c.addT(value);
 
           // Add tooltip
           var anno = ah.getDesc(key, value);
@@ -206,9 +204,7 @@
         tr.addCell('th', undefined, this.getToken(i));
       };
       
-      var tbody = table.appendChild(
-        d.createElement('tbody')
-      );
+      var tbody = table.addE('tbody');
 
       var foundryList = Object.keys(this._foundry).sort();
 
@@ -219,9 +215,7 @@
 
         for (var l = 0; l < layerList.length; l++) {
           var layer = layerList[l];
-          tr = tbody.appendChild(
-            d.createElement('tr')
-          );
+          tr = tbody.addE('tr');
           tr.setAttribute('tabindex', 0);
           tr.addCell = addCell;
 
diff --git a/dev/js/src/match/tree.js b/dev/js/src/match/tree.js
index c17fe20..08ebeef 100644
--- a/dev/js/src/match/tree.js
+++ b/dev/js/src/match/tree.js
@@ -7,8 +7,9 @@
 define(['lib/dagre'], function (dagre) {
   "use strict";
 
-  var svgXmlns = "http://www.w3.org/2000/svg";
-  var _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
+  const d = document;
+  const svgNS = "http://www.w3.org/2000/svg";
+  const _TermRE = new RegExp("^(?:([^\/]+?)\/)?([^:]+?):(.+?)$");
 
   // Node size
   var WIDTH  = 55, HEIGHT = 20, LINEHEIGHT = 14;
@@ -44,7 +45,7 @@
       this._next = new Number(0);
       
       // Create html for traversal
-      var html = document.createElement("div");
+      var html = d.createElement("div");
       html.innerHTML = snippet;
       var g = new dagre.graphlib.Graph({
        "directed" : true 
@@ -76,6 +77,11 @@
       return this;
     },
 
+
+    _c : function (tag) {
+      return d.createElementNS(svgNS, tag);
+    },
+    
     /**
      * The number of nodes in the tree.
      */
@@ -194,11 +200,11 @@
     toBase64 : function () {
 
       // First clone element
-      var svgWrapper = document.createElement('div')
+      var svgWrapper = d.createElement('div')
       svgWrapper.innerHTML = this.element().outerHTML;
       var svg = svgWrapper.firstChild;
 
-      var style = document.createElementNS(svgXmlns, 'style');
+      var style = this._c('style');
       svg.getElementsByTagName('defs')[0].appendChild(style);
 
       style.innerHTML = 
@@ -223,10 +229,11 @@
 
       dagre.layout(g);
       
-      var canvas = document.createElementNS(svgXmlns, 'svg');
+      var canvas = this._c('svg');
       this._element = canvas;
+      var that = this;
 
-      canvas.appendChild(document.createElementNS(svgXmlns, 'defs'));
+      canvas.appendChild(this._c('defs'));
       
       var height = g.graph().height;
 
@@ -235,7 +242,7 @@
         function (e) {
           var src = g.node(e.v);
           var target = g.node(e.w);
-          var p = document.createElementNS(svgXmlns, 'path');
+          var p = that._c('path');
           p.setAttributeNS(null, "d", _line(src, target));
           p.classList.add('edge');
           canvas.appendChild(p);
@@ -245,11 +252,11 @@
       g.nodes().forEach(
         function (v) {
           v = g.node(v);
-          var group = document.createElementNS(svgXmlns, 'g');
+          var group = that._c('g');
           group.setAttribute('class', v.class);
           
           // Add node box
-          var rect = group.appendChild(document.createElementNS(svgXmlns, 'rect'));
+          var rect = group.appendChild(that._c('rect'));
           rect.setAttribute('x', v.x - v.width / 2);
           rect.setAttribute('y', v.y - v.height / 2);
           rect.setAttribute('rx', 5);
@@ -265,7 +272,7 @@
 
           // Add label
           if (v.label !== undefined) {
-            var text = group.appendChild(document.createElementNS(svgXmlns, 'text'));
+            var text = group.appendChild(that._c('text'));
             var y = v.y - v.height / 2;
             text.setAttribute('y', y);
             text.setAttribute(
@@ -282,8 +289,8 @@
                 if (labelPart[i].length === 0)
                   continue;
 
-                var tspan = document.createElementNS(svgXmlns, 'tspan');
-                tspan.appendChild(document.createTextNode(labelPart[i]));
+                var tspan = that._c('tspan');
+                tspan.appendChild(d.createTextNode(labelPart[i]));
                 if (n !== 0)
                   tspan.setAttribute('dy', LINEHEIGHT + 'pt');
                 else
@@ -300,8 +307,8 @@
                 height = y;
             }
             else {
-              var tspan = document.createElementNS(svgXmlns, 'tspan');
-              tspan.appendChild(document.createTextNode(v.label));
+              var tspan = that._c('tspan');
+              tspan.appendChild(d.createTextNode(v.label));
               tspan.setAttribute('x', v.x - v.width / 2);
               text.appendChild(tspan);
             };
@@ -316,7 +323,7 @@
     },
 
     downloadLink : function () {
-      var a = document.createElement('a');
+      var a = d.createElement('a');
       a.setAttribute('href-lang', 'image/svg+xml');
       a.setAttribute('href', 'data:image/svg+xml;base64,' + this.toBase64());
       a.setAttribute('download', 'tree.svg');
diff --git a/dev/js/src/menu/slider.js b/dev/js/src/menu/slider.js
index 5df1543..adaf81a 100644
--- a/dev/js/src/menu/slider.js
+++ b/dev/js/src/menu/slider.js
@@ -17,6 +17,7 @@
     return Object.create(this)._init(menu);
   },
 
+
   /**
    * Length attribute of the slider
    * (as number of items).
@@ -32,6 +33,7 @@
     return this;
   },
 
+
   /**
    * Limit of items per screen.
    *
@@ -46,6 +48,7 @@
     return this;
   },
 
+
   /**
    * Is the slider active or not.
    *
@@ -54,19 +57,20 @@
   active : function (bool) {
     if (arguments.length === 1) {
       if (bool) {
-	if (!this._active) {
-	  this._element.classList.add('active');
-	  this._active = true;
-	};
+	      if (!this._active) {
+	        this._element.classList.add('active');
+	        this._active = true;
+	      };
       }
       else if (this._active) {
-	this._element.classList.remove('active');
-	this._active = false;
+	      this._element.classList.remove('active');
+	      this._active = false;
       }
     };
     return this._active;
   },
 
+
   /**
    * Move the slider to a relative position
    *
@@ -88,6 +92,7 @@
     };
   },
 
+
   /**
    * Move the slider to an absolute position
    *
@@ -102,6 +107,7 @@
     };
   },
 
+
   /**
    * Screen offset of the slider
    *
@@ -127,6 +133,7 @@
     return off;
   },
 
+
   /**
    * Get the associated dom element.
    */
@@ -134,6 +141,7 @@
     return this._element;
   },
 
+
   /**
    * Reinitialize the size of the slider.
    * Necessary to call after each adjustment of the list.
@@ -157,6 +165,7 @@
     this._slider.style.height = this._height + '%';
   },
 
+
   // Initialize prefix object
   _init : function (menu) {
 
@@ -188,18 +197,21 @@
     return this;
   },
 
+
   // Reinit height based on dom position
   _initClientHeight : function () {
     this._rulerHeight  = this._element.clientHeight;
     this._sliderHeight = this._slider.clientHeight;
   },
 
+
   // Release mousemove event
   _mousemove : function (e) {
     this.movetoRel(e.clientY - this._event.init);
     e.halt();
   },
 
+
   // Release mouseup event
   _mouseup : function (e) {
     this.active(false);
@@ -208,6 +220,7 @@
     this._menu.focus();
   },
 
+
   // Release mousedown event
   _mousedown : function (e) {
     // Bind drag handler
@@ -232,6 +245,7 @@
     e.halt();
   },
 
+
   // Release event to reposition slider on ruler
   _mouseclick : function (e) {
     this._initClientHeight();
diff --git a/dev/js/src/palette.js b/dev/js/src/palette.js
index 8c9f3fa..c5c91ee 100644
--- a/dev/js/src/palette.js
+++ b/dev/js/src/palette.js
@@ -3,7 +3,7 @@
    * Created with http://tools.medialab.sciences-po.fr/iwanthue/
    * and H: 0-360, C: 0.4-2.1, L: 0.7-1.5, 64 colors
    */
-  var palette = [
+  const palette = [
     '9C8AC7',
     '6DED31',
     'DF7F23',
diff --git a/dev/js/src/selectMenu.js b/dev/js/src/selectMenu.js
index d44d756..9f447ca 100644
--- a/dev/js/src/selectMenu.js
+++ b/dev/js/src/selectMenu.js
@@ -1,5 +1,5 @@
 define(
-  ['menu', 'selectMenu/item'],
+  ['menu', 'selectMenu/item', 'util'],
   function (menuClass, selectMenuItemClass) {
 
     return {
@@ -42,8 +42,8 @@
 	      obj._select.style.display = 'none';
 
 	      // Create title
-	      obj._title = obj._container.appendChild(document.createElement('span'));
-	      obj._title.appendChild(document.createTextNode(''));
+	      obj._title = obj._container.addE('span');
+	      obj._title.addT('');
 	      obj._container.appendChild(obj.element());
 
         // Show the menu
diff --git a/dev/js/src/selectMenu/item.js b/dev/js/src/selectMenu/item.js
index 75003b8..3bd1406 100644
--- a/dev/js/src/selectMenu/item.js
+++ b/dev/js/src/selectMenu/item.js
@@ -2,7 +2,6 @@
   /**
    * Menu item for select menus.
    */
-
   return {
 
     /**
@@ -14,6 +13,7 @@
 	      .upgradeTo(this)._init(params);
     },
 
+
     /**
      * Override click action of the menu item.
      */
@@ -26,6 +26,10 @@
       e.halt();
     },
 
+
+    /**
+     * Get title of item.
+     */
     title : function () {
       return this.content().textContent;
     }
diff --git a/dev/js/src/session.js b/dev/js/src/session.js
index f81eb8f..27af76d 100644
--- a/dev/js/src/session.js
+++ b/dev/js/src/session.js
@@ -61,10 +61,10 @@
       var pair = part[i].split('=');
       var name = pair[0].trim().toLowerCase();
       if (name === this._name) {
-	if (pair.length === 1 || pair[1].length === 0)
-	  return;
+	      if (pair.length === 1 || pair[1].length === 0)
+	        return;
         this._hash = JSON.parse(decodeURIComponent(pair[1]));
-	return;
+	      return;
       };
     };
   }
diff --git a/dev/js/src/tagger.js b/dev/js/src/tagger.js
index 4ff7c03..3aeeb59 100644
--- a/dev/js/src/tagger.js
+++ b/dev/js/src/tagger.js
@@ -1,4 +1,4 @@
-define(['palette'], function (p) {
+define(['palette','util'], function (p) {
 
   // "use strict";
 
@@ -7,21 +7,17 @@
       var obj = Object.create(this);
       obj._nr = 0;
       obj._elem = elem;
-      elem.appendChild(
-	document.createElement('div')
-      );
-      var newCat = elem.appendChild(
-	document.createElement('input')
-      );
+      elem.addE('div');
+      var newCat = elem.addE('input');
 
       newCat.setAttribute('type', 'text');
 
       newCat.addEventListener('keypress', function (e) {
-	var key = e.keyCode || e.which;
-	if (key === 13) {
-	  obj.addTag(this.value);
-	  this.value = '';
-	};
+	      var key = e.keyCode || e.which;
+	      if (key === 13) {
+	        obj.addTag(this.value);
+	        this.value = '';
+	      };
       });
 
       obj._cat = [];
@@ -33,12 +29,8 @@
       this._nr++;
 
       var cat = document.createElement('span');
-      cat.appendChild(
-	document.createTextNode(name)
-      );
-      cat.appendChild(
-	document.createElement('span')
-      ).setAttribute('class','close');
+      cat.addT(name);
+      cat.addE('span').setAttribute('class','close');
 
       cat.style.backgroundColor = p.getC(this._nr);
 
diff --git a/dev/js/src/tutorial.js b/dev/js/src/tutorial.js
index fbb33ee..78d4a86 100644
--- a/dev/js/src/tutorial.js
+++ b/dev/js/src/tutorial.js
@@ -9,7 +9,7 @@
   "use strict";
 
   // Localization values
-  var loc   = KorAP.Locale;
+  const loc   = KorAP.Locale;
   loc.CLOSE = loc.CLOSE || 'Close';
 
   return {
@@ -138,8 +138,7 @@
 
 	      // Add close button
 	      var close = document.createElement('li');
-	      close.appendChild(document.createElement('span'))
-	        .appendChild(document.createTextNode(loc.CLOSE));
+	      close.addE('span').addT(loc.CLOSE);
 	      close.classList.add('close');
 	      close.setAttribute('title', loc.CLOSE);
 	      close.onclick = function () {
diff --git a/dev/js/src/util.js b/dev/js/src/util.js
index 719c889..5b6c8f8 100644
--- a/dev/js/src/util.js
+++ b/dev/js/src/util.js
@@ -32,11 +32,12 @@
   };
 };
 
-
+// Append element by tag name
 HTMLElement.prototype.addE = function (tag) {
   return this.appendChild(document.createElement(tag));
 };
 
+// Append text node
 HTMLElement.prototype.addT = function (text) {
   return this.appendChild(document.createTextNode(text));
 };
@@ -64,7 +65,7 @@
   KorAP.API = KorAP.API || {};
   KorAP.Locale = KorAP.Locale || {};
 
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
   loc.OR  = loc.OR  || 'or';
   loc.AND = loc.AND || 'and';
 
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index 4772115..1e6a91c 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -60,7 +60,7 @@
   KorAP._validStringMatchRE = new RegExp("^(?:eq|ne|contains(?:not)?|excludes)$");
   KorAP._overrideStyles     = false;
 
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
 
   KorAP._vcKeyMenu = undefined;
   KorAP._vcDatePicker = dpClass.create();
diff --git a/dev/js/src/vc/chooseitem.js b/dev/js/src/vc/chooseitem.js
index 5dc42b3..9f6fc06 100644
--- a/dev/js/src/vc/chooseitem.js
+++ b/dev/js/src/vc/chooseitem.js
@@ -82,7 +82,7 @@
       // Connect action
       li["onclick"] = this.onclick.bind(this);
 
-      li.appendChild(document.createTextNode(this._name));
+      li.addT(this._name);
       return this._element = li;
     }
   }
diff --git a/dev/js/src/vc/choosemenu.js b/dev/js/src/vc/choosemenu.js
index 2ecb3b7..84f6ae9 100644
--- a/dev/js/src/vc/choosemenu.js
+++ b/dev/js/src/vc/choosemenu.js
@@ -6,8 +6,8 @@
   return {
     create : function (params) {
       return Object.create(menuClass)
-	.upgradeTo(this)
-	._init(itemClass, undefined, undefined, params);
+	      .upgradeTo(this)
+	      ._init(itemClass, undefined, undefined, params);
     },
 
     /**
@@ -15,7 +15,7 @@
      */
     release : function (id, name) {
       if (this._cb !== undefined)
-	this._cb(id, name);
+	      this._cb(id, name);
     }
   };
 }); 
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 87b7057..f3e5559 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -9,20 +9,9 @@
   'util'
 ], function (jsonldClass, rewriteListClass, stringValClass) {
 
-    /*
-      var fieldMenu = menuClass.create([
-        ['Titel', 'title', 'string'],
-        ['Untertitel', 'subTitle', 'string'],
-        ['Veröffentlichungsdatum', 'pubDate', 'date'],
-        ['Autor', 'author', 'string']
-      ]);
-      
-      fieldMenu.limit(5);
-    */
-
   _validRegexMatchRE  = new RegExp("^(?:eq|ne)$");
 
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
   loc.EMPTY = loc.EMPTY || '⋯';
 
   return {
@@ -85,16 +74,14 @@
           var k = this.key();
           if (loc['VC_' + k] !== undefined)
             k = loc['VC_' + k];
-          this._keyE.appendChild(document.createTextNode(k));
+          this._keyE.addT(k);
         };
 
         // Added match operator
         this._matchopE = document.createElement('span');
         this._matchopE.setAttribute('data-type', this.type());
         this._matchopE.setAttribute('class', 'match');
-        this._matchopE.appendChild(
-          document.createTextNode(this.matchop())
-        );
+        this._matchopE.addT(this.matchop());
 
         // Change matchop
         this._matchopE.addEventListener(
@@ -107,10 +94,10 @@
         this._valueE.setAttribute('data-type', this.type());
         this._valueE.setAttribute('class', 'value');
         if (this.value()) {
-          this._valueE.appendChild(document.createTextNode(this.value()));
+          this._valueE.addT(this.value());
         }
         else {
-          this._valueE.appendChild(document.createTextNode(loc.EMPTY));
+          this._valueE.addT(loc.EMPTY);
         };
 
         // Change value
diff --git a/dev/js/src/vc/docgroup.js b/dev/js/src/vc/docgroup.js
index da1f6ab..58926f2 100644
--- a/dev/js/src/vc/docgroup.js
+++ b/dev/js/src/vc/docgroup.js
@@ -13,11 +13,11 @@
 	     unspecClass,
 	     docClass) {
 
-  var _validGroupOpRE = new RegExp("^(?:and|or)$");
+  const _validGroupOpRE = new RegExp("^(?:and|or)$");
 
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
 
-  var docGroupClass = {
+  const docGroupClass = {
     _ldType : "docGroup",
 
     create : function (parent, json) {
@@ -25,33 +25,33 @@
       obj._operands = [];
       obj.fromJson(json);
       if (parent !== undefined)
-	obj._parent = parent;
+	      obj._parent = parent;
       return obj;
     },
     
     newAfter : function (obj) {
       for (var i = 0; i < this._operands.length; i++) {
-	if (this._operands[i] === obj) {
-	  var operand = unspecClass.create(this);
-	  this._operands.splice(i + 1, 0, operand);
-	  return this.update();
-	};
+	      if (this._operands[i] === obj) {
+	        var operand = unspecClass.create(this);
+	        this._operands.splice(i + 1, 0, operand);
+	        return this.update();
+	      };
       };
     },
 
     // The doc is already set in the group
     _duplicate : function (operand) {
       if (operand.ldType() !== 'doc')
-	return null;
+	      return null;
 
       for (var i = 0; i < this._operands.length; i++) {
-	var op = this.getOperand(i);
-	if (op.ldType() === 'doc'
-	    && operand.key() === op.key()
-	    && operand.matchop() === op.matchop()
-	    && operand.value() === op.value()) {
-	  return op;
-	};
+	      var op = this.getOperand(i);
+	      if (op.ldType() === 'doc'
+	          && operand.key() === op.key()
+	          && operand.matchop() === op.matchop()
+	          && operand.value() === op.value()) {
+	        return op;
+	      };
       };
       return null;
     },
@@ -61,75 +61,75 @@
       // Append unspecified object
       if (operand === undefined) {
 
-	// Be aware of cyclic structures!
-	operand = unspecClass.create(this);
-	this._operands.push(operand);
-	return operand;
+	      // Be aware of cyclic structures!
+	      operand = unspecClass.create(this);
+	      this._operands.push(operand);
+	      return operand;
       };
       
       switch (operand["@type"]) {
-	
+	      
       case undefined:
-	// No @type defined
-	if (operand["ldType"] !== undefined) {
-	  if (operand.ldType() !== 'doc' &&
-	      operand.ldType() !== 'docGroup') {
-	    KorAP.log(812, "Operand not supported in document group");
-	    return;
-	  };
+	      // No @type defined
+	      if (operand["ldType"] !== undefined) {
+	        if (operand.ldType() !== 'doc' &&
+	            operand.ldType() !== 'docGroup') {
+	          KorAP.log(812, "Operand not supported in document group");
+	          return;
+	        };
 
-	  // Be aware of cyclic structures!
-	  operand.parent(this);
+	        // Be aware of cyclic structures!
+	        operand.parent(this);
 
-	  var dupl = this._duplicate(operand);
-	  if (dupl === null) {
-	    this._operands.push(operand);
-	    return operand;
-	  };
-	  return dupl;
-	};
+	        var dupl = this._duplicate(operand);
+	        if (dupl === null) {
+	          this._operands.push(operand);
+	          return operand;
+	        };
+	        return dupl;
+	      };
 
-	KorAP.log(701, "JSON-LD group has no @type attribute");
-	return;
+	      KorAP.log(701, "JSON-LD group has no @type attribute");
+	      return;
 
       case "koral:doc":
-	// Be aware of cyclic structures!
-	var doc = docClass.create(this, operand);
-	if (doc === undefined)
-	  return;
-	var dupl = this._duplicate(doc);
-	if (dupl === null) {
-	  this._operands.push(doc);
-	  return doc;
-	};
-	return dupl;
+	      // Be aware of cyclic structures!
+	      var doc = docClass.create(this, operand);
+	      if (doc === undefined)
+	        return;
+	      var dupl = this._duplicate(doc);
+	      if (dupl === null) {
+	        this._operands.push(doc);
+	        return doc;
+	      };
+	      return dupl;
 
       case "koral:docGroup":
-	// Be aware of cyclic structures!
-	var docGroup = docGroupClass.create(this, operand);
-	if (docGroup === undefined)
-	  return;
+	      // Be aware of cyclic structures!
+	      var docGroup = docGroupClass.create(this, operand);
+	      if (docGroup === undefined)
+	        return;
 
-	// Flatten group
-	if (docGroup.operation() === this.operation()) {
-	  for (var op in docGroup.operands()) {
-	    op = docGroup.getOperand(op);
-	    var dupl = this._duplicate(op);
-	    if (dupl === null) {
-	      this._operands.push(op);
-	      op.parent(this);
-	    };
-	  };
-	  docGroup._operands = [];
-	  docGroup.destroy();
-	  return this;
-	};
-	this._operands.push(docGroup);
-	return docGroup;
+	      // Flatten group
+	      if (docGroup.operation() === this.operation()) {
+	        for (var op in docGroup.operands()) {
+	          op = docGroup.getOperand(op);
+	          var dupl = this._duplicate(op);
+	          if (dupl === null) {
+	            this._operands.push(op);
+	            op.parent(this);
+	          };
+	        };
+	        docGroup._operands = [];
+	        docGroup.destroy();
+	        return this;
+	      };
+	      this._operands.push(docGroup);
+	      return docGroup;
 
       default:
-	KorAP.log(812, "Operand not supported in document group");
-	return;
+	      KorAP.log(812, "Operand not supported in document group");
+	      return;
       };
     },
 
@@ -137,30 +137,30 @@
       // There is only one operand in group
       
       if (this._operands.length === 1) {
-	
-	var parent = this.parent();
-	var op = this.getOperand(0);
-	
-	// This will prevent destruction of
-	// the operand
-	this._operands = [];
+	      
+	      var parent = this.parent();
+	      var op = this.getOperand(0);
+	      
+	      // This will prevent destruction of
+	      // the operand
+	      this._operands = [];
 
-	// Parent is a group
-	if (parent.ldType() !== null)
-	  return parent.replaceOperand(this, op).update();
+	      // Parent is a group
+	      if (parent.ldType() !== null)
+	        return parent.replaceOperand(this, op).update();
 
-	// Parent is vc
-	else {
-	  this.destroy();
-	  // Cyclic madness
-	  parent.root(op);
-	  op.parent(parent);
-	  return parent.root();
-	};
+	      // Parent is vc
+	      else {
+	        this.destroy();
+	        // Cyclic madness
+	        parent.root(op);
+	        op.parent(parent);
+	        return parent.root();
+	      };
       };
 
       if (this._element === undefined)
-	return this;
+	      return this;
 
       var group = this._element;
       group.setAttribute('data-operation', this.operation());
@@ -169,16 +169,16 @@
 
       // Append operands
       for (var i = 0; i < this._operands.length; i++) {
-	group.appendChild(
-	  this.getOperand(i).element()
-	);
+	      group.appendChild(
+	        this.getOperand(i).element()
+	      );
       };
 
       // Set operators
       var op = this.operators(
-	this.operation() == 'and' ? false : true,
-	this.operation() == 'or'  ? false : true,
-	true
+	      this.operation() == 'and' ? false : true,
+	      this.operation() == 'or'  ? false : true,
+	      true
       );
 
       group.appendChild(op.element());
@@ -188,7 +188,7 @@
 
     element : function () {
       if (this._element !== undefined)
-	return this._element;
+	      return this._element;
 
       this._element = document.createElement('div');
       this._element.setAttribute('class', 'docGroup');
@@ -201,13 +201,13 @@
 
     operation : function (op) {
       if (arguments.length === 1) {
-	if (_validGroupOpRE.test(op)) {
-	  this._op = op;
-	}
-	else {
-	  KorAP.log(810, "Unknown operation type");
-	  return;
-	};
+	      if (_validGroupOpRE.test(op)) {
+	        this._op = op;
+	      }
+	      else {
+	        KorAP.log(810, "Unknown operation type");
+	        return;
+	      };
       };
       return this._op || 'and';
     },
@@ -224,36 +224,36 @@
     replaceOperand : function (oldOp, newOp) {
       
       for (var i = 0; i < this._operands.length; i++) {
-	if (this._operands[i] === oldOp) {
-	  
-	  // Just insert a doc or ...
-	  if (newOp.ldType() === "doc" ||
-	      newOp.ldType() === "non" ||
-	      // ... insert a group of a different operation
-	      // (i.e. "and" in "or"/"or" in "and")
-	      newOp.operation() != this.operation()) {
-	    this._operands[i] = newOp;
-	    newOp.parent(this);
-	  }
+	      if (this._operands[i] === oldOp) {
+	        
+	        // Just insert a doc or ...
+	        if (newOp.ldType() === "doc" ||
+	            newOp.ldType() === "non" ||
+	            // ... insert a group of a different operation
+	            // (i.e. "and" in "or"/"or" in "and")
+	            newOp.operation() != this.operation()) {
+	          this._operands[i] = newOp;
+	          newOp.parent(this);
+	        }
 
-	  // Flatten group
-	  else {
-	    // Remove old group
-	    this._operands.splice(i, 1);
+	        // Flatten group
+	        else {
+	          // Remove old group
+	          this._operands.splice(i, 1);
 
-	    // Inject new operands
-	    for (var op in newOp.operands().reverse()) {
-	      op = newOp.getOperand(op);
-	      this._operands.splice(i, 0, op);
-	      op.parent(this);
-	    };
-	    // Prevent destruction of operands
-	    newOp._operands = [];
-	    newOp.destroy();
-	  };
-	  oldOp.destroy();
-	  return this;
-	}
+	          // Inject new operands
+	          for (var op in newOp.operands().reverse()) {
+	            op = newOp.getOperand(op);
+	            this._operands.splice(i, 0, op);
+	            op.parent(this);
+	          };
+	          // Prevent destruction of operands
+	          newOp._operands = [];
+	          newOp.destroy();
+	        };
+	        oldOp.destroy();
+	        return this;
+	      }
       };
       return false;
     },
@@ -261,16 +261,16 @@
     // Delete operand from group
     delOperand : function (obj) {
       for (var i = 0; i < this._operands.length; i++) {
-	if (this._operands[i] === obj) {
-	  
-	  // Delete identified operand
-	  this._operands.splice(i,1);
+	      if (this._operands[i] === obj) {
+	        
+	        // Delete identified operand
+	        this._operands.splice(i,1);
 
-	  // Destroy object for cyclic references
-	  obj.destroy();
+	        // Destroy object for cyclic references
+	        obj.destroy();
 
-	  return this;
-	};
+	        return this;
+	      };
       };
 
       // Operand not found
@@ -280,17 +280,17 @@
     // Deserialize from json
     fromJson : function (json) {
       if (json === undefined)
-	return this;
+	      return this;
 
       if (json["@type"] === undefined) {
-	KorAP.log(701, "JSON-LD group has no @type attribute");
-	return;
+	      KorAP.log(701, "JSON-LD group has no @type attribute");
+	      return;
       };
 
       if (json["operation"] === undefined ||
-	  typeof json["operation"] !== 'string') {
-	KorAP.log(811, "Document group expects operation");
-	return;
+	        typeof json["operation"] !== 'string') {
+	      KorAP.log(811, "Document group expects operation");
+	      return;
       };
 
       var operation = json["operation"];
@@ -298,15 +298,15 @@
       this.operation(operation.replace(/^operation:/,''));
 
       if (json["operands"] === undefined ||
-	  !(json["operands"] instanceof Array)) {
-	KorAP.log(704, "Operation needs operand list")
-	return;
+	        !(json["operands"] instanceof Array)) {
+	      KorAP.log(704, "Operation needs operand list")
+	      return;
       };
 
       // Add all documents
       for (var i in json["operands"]) {
-	var operand = json["operands"][i];
-	this.append(operand);
+	      var operand = json["operands"][i];
+	      this.append(operand);
       };
       
       return this;
@@ -315,32 +315,32 @@
     toJson : function () {
       var opArray = new Array();
       for (var i = 0; i < this._operands.length; i++) {
-	if (this._operands[i].ldType() !== 'non')
-	  opArray.push(this._operands[i].toJson());
+	      if (this._operands[i].ldType() !== 'non')
+	        opArray.push(this._operands[i].toJson());
       };
       return {
-	"@type"     : "koral:" + this.ldType(),
-	"operation" : "operation:" + this.operation(),
-	"operands"  : opArray
+	      "@type"     : "koral:" + this.ldType(),
+	      "operation" : "operation:" + this.operation(),
+	      "operands"  : opArray
       };
     },
 
     toQuery : function (brackets) {
       var list = this._operands
-	.filter(function (op) {
-	  return op.ldType() !== 'non';
-	})
-	.map(function (op) {
-	  return (op.ldType() === 'docGroup') ?
-	    op.toQuery(true) :
-	    op.toQuery();
-	});
+	        .filter(function (op) {
+	          return op.ldType() !== 'non';
+	        })
+	        .map(function (op) {
+	          return (op.ldType() === 'docGroup') ?
+	            op.toQuery(true) :
+	            op.toQuery();
+	        });
       
       if (list.length === 1)
-	return list.join('');
+	      return list.join('');
       else {
-	var str = list.join(this.operation() === 'or' ? ' | ' : ' & ');
-	return brackets ? '(' + str + ')' : str;
+	      var str = list.join(this.operation() === 'or' ? ' | ' : ' & ');
+	      return brackets ? '(' + str + ')' : str;
       };
     }
   };
diff --git a/dev/js/src/vc/item.js b/dev/js/src/vc/item.js
index c05fbad..d2c6fc1 100644
--- a/dev/js/src/vc/item.js
+++ b/dev/js/src/vc/item.js
@@ -1,7 +1,7 @@
 // Field menu item
 define(['menu/item', 'util'], function (itemClass) {
 
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
 
   return {
 
@@ -14,14 +14,14 @@
      */
     create : function (params) {
       return Object.create(itemClass)
-	.upgradeTo(this)
-	._init(params);
+	      .upgradeTo(this)
+	      ._init(params);
     },
 
     // Initialize item object
     _init : function (params) {
       if (params[0] === undefined)
-	throw new Error("Missing parameters");
+	      throw new Error("Missing parameters");
 
       this._key = params[0];
       this._type  = params[1];
@@ -40,8 +40,8 @@
      */
     onclick : function (e) {
       this.menu().release(
-	this._key,
-	this._type
+	      this._key,
+	      this._type
       );
       e.halt();
     },
@@ -76,7 +76,7 @@
 
       // already defined
       if (this._element !== undefined)
-	return this._element;
+	      return this._element;
 
       // Create list item
       var li = document.createElement("li");
@@ -86,7 +86,7 @@
       // Connect action
       li["onclick"] = this.onclick.bind(this);
 
-      li.appendChild(document.createTextNode(this._name));
+      li.addT(this._name);
       return this._element = li;
     }
   };
diff --git a/dev/js/src/vc/menu.js b/dev/js/src/vc/menu.js
index af4f8e1..6a242e2 100644
--- a/dev/js/src/vc/menu.js
+++ b/dev/js/src/vc/menu.js
@@ -2,6 +2,7 @@
  * Menu showing all key fields.
  */
 define(['menu', 'vc/item', 'vc/prefix'], function (menuClass, itemClass, prefixClass) {
+
   return {
     create : function (params) {
       var obj = Object.create(menuClass)
diff --git a/dev/js/src/vc/operators.js b/dev/js/src/vc/operators.js
index 41ab744..842fbc1 100644
--- a/dev/js/src/vc/operators.js
+++ b/dev/js/src/vc/operators.js
@@ -3,7 +3,7 @@
  */
 define(['util'], function () {
 
-  var loc = KorAP.Locale;
+  const loc = KorAP.Locale;
   loc.DEL   = loc.DEL   || '×';
 
 
@@ -22,26 +22,26 @@
 
       // Check that the action differs from the type
       if (ref.operation() === type)
-	return;
+	      return;
 
       if (parent.ldType() !== null) {
-	return parent.newAfter(ref);
+	      return parent.newAfter(ref);
       }
       else {
-	// The group is on root - wrap
-	return ref.wrapOnRoot();
+	      // The group is on root - wrap
+	      return ref.wrapOnRoot();
       };
     }
     else if (ref.ldType() === 'doc') {
 
       if (parent.ldType() === null) {
-	return ref.wrapOnRoot(type);
+	      return ref.wrapOnRoot(type);
       }
       else if (parent.operation() === type) {
-	return parent.newAfter(ref);
+	      return parent.newAfter(ref);
       }
       else {
-	return ref.wrap(type);
+	      return ref.wrap(type);
       };
     };
   };
@@ -83,7 +83,7 @@
     update : function () {
       // Init the element
       if (this._element === undefined)
-	return this.element();
+	      return this.element();
 
       var op = this._element;
 
@@ -94,31 +94,26 @@
       
       // Add and button
       if (this._and === true) {
-	var andE = document.createElement('span');
-	andE.setAttribute('class', 'and');
-	andE.addEventListener('click', KorAP._and, false);
-	andE.appendChild(
-	  document.createTextNode(loc.AND)
-	);
-	op.appendChild(andE);
+	      var andE = op.addE('span');
+	      andE.setAttribute('class', 'and');
+	      andE.addEventListener('click', KorAP._and, false);
+	      andE.addT(loc.AND);
       };
 
       // Add or button
       if (this._or === true) {
-	var orE = document.createElement('span');
-	orE.setAttribute('class', 'or');
-	orE.addEventListener('click', KorAP._or, false);
-	orE.appendChild(document.createTextNode(loc.OR));
-	op.appendChild(orE);
+	      var orE = op.addE('span');
+	      orE.setAttribute('class', 'or');
+	      orE.addEventListener('click', KorAP._or, false);
+	      orE.addT(loc.OR);
       };
 
       // Add delete button
       if (this._del === true) {
-	var delE = document.createElement('span');
-	delE.setAttribute('class', 'delete');
-	delE.appendChild(document.createTextNode(loc.DEL));
-	delE.addEventListener('click', KorAP._delete, false);
-	op.appendChild(delE);
+	      var delE = op.addE('span');
+	      delE.setAttribute('class', 'delete');
+	      delE.addT(loc.DEL);
+	      delE.addEventListener('click', KorAP._delete, false);
       };
 
       return op;
@@ -127,7 +122,7 @@
     // Be aware! This may be cyclic
     parent : function (obj) {
       if (arguments.length === 1)
-	this._parent = obj;
+	      this._parent = obj;
       return this._parent;
     },
 
@@ -135,7 +130,7 @@
 
       // Return existing element
       if (this._element !== undefined)
-	return this._element;
+	      return this._element;
 
       this._element = document.createElement('div');
       this._element.classList.add('operators', 'button-group');
@@ -147,19 +142,19 @@
 
     and : function (bool) {
       if (arguments.length === 1)
-	this._and = _bool(bool);
+	      this._and = _bool(bool);
       return this._and;
     },
 
     or : function (bool) {
       if (arguments.length === 1)
-	this._or = _bool(bool);
+	      this._or = _bool(bool);
       return this._or;
     },
 
     del : function (bool) {
       if (arguments.length === 1)
-	this._del = _bool(bool);
+	      this._del = _bool(bool);
       return this._del;
     }
   };
diff --git a/dev/js/src/vc/rewrite.js b/dev/js/src/vc/rewrite.js
index b577f14..eeec713 100644
--- a/dev/js/src/vc/rewrite.js
+++ b/dev/js/src/vc/rewrite.js
@@ -4,7 +4,8 @@
 define(['vc/jsonld', 'util'], function (jsonldClass) {
 
   // injection, modification, and deletion should probably be enough
-  var _validRewriteOpRE   = new RegExp("^(operation:)?(?:injec|inser|modifica|dele)tion|override$");
+  const _validRewriteOpRE =
+        new RegExp("^(operation:)?(?:injec|inser|modifica|dele)tion|override$");
 
   return {
     // Construction method
diff --git a/dev/js/src/vc/rewritelist.js b/dev/js/src/vc/rewritelist.js
index af3c05a..cec95ff 100644
--- a/dev/js/src/vc/rewritelist.js
+++ b/dev/js/src/vc/rewritelist.js
@@ -1,47 +1,52 @@
-define(['vc/jsonld', 'vc/rewrite'], function (jsonldClass, rewriteClass) {
+define(['vc/jsonld', 'vc/rewrite','util'], function (jsonldClass, rewriteClass) {
   return {
     // Construction method
     create : function (json) {
       var obj = Object(jsonldClass).
-	create().
-	upgradeTo(this).
-	fromJson(json);
+	        create().
+	        upgradeTo(this).
+	        fromJson(json);
       return obj;
     },
+
+
+    /**
+     * Deserialize from KoralQuery
+     */
     fromJson : function (json) {
       this._list = new Array();
       for (var i = 0; i < json.length; i++) {
-	this._list.push(
-	  rewriteClass.create(json[i])
-	);
+	      this._list.push(
+	        rewriteClass.create(json[i])
+	      );
       };
       return this;
     },
+
+    /**
+     * Get element.
+     */
     element : function () {
       if (this._element !== undefined)
-	return this._element;
+	      return this._element;
 
       this._element = document.createElement('div');
       this._element.setAttribute('class', 'rewrite');
       for (var x in this._list) {
-	var rewrite = this._list[x];
-	var span = document.createElement('span');
+	      var rewrite = this._list[x];
+	      var span = document.createElement('span');
 
-	// Set class attribute
-	span.setAttribute('class', rewrite.operation());
+	      // Set class attribute
+	      span.setAttribute('class', rewrite.operation());
 
-	// Append source information
-	span.appendChild(document.createTextNode(rewrite.src()));
+	      // Append source information
+	      span.addT(rewrite.src());
 
-	// Append scope information
-	if (rewrite.scope() !== undefined) {
-	  span.appendChild(
-	    document.createTextNode(
-	      ': ' + rewrite.scope()
-	    )
-	  );
-	};
-	this._element.appendChild(span);
+	      // Append scope information
+	      if (rewrite.scope() !== undefined) {
+	        span.addT(': ' + rewrite.scope());
+	      };
+	      this._element.appendChild(span);
       };
       return this._element;
     }
diff --git a/dev/js/src/vc/stringval.js b/dev/js/src/vc/stringval.js
index 1cebde4..bd3a65c 100644
--- a/dev/js/src/vc/stringval.js
+++ b/dev/js/src/vc/stringval.js
@@ -1,7 +1,7 @@
 /**
  * Add string values to the virtual collection
  */
-define({
+define(['util'], {
 
   /**
    * Create new string value helper.
@@ -118,16 +118,12 @@
       cl.add('regex');
     
     // Add input field
-    this._input = e.appendChild(
-      document.createElement('input')
-    );
+    this._input = e.addE('input');
     if (this.value() !== undefined)
       this._input.value = this.value();
 
     // Add regex button
-    var re = e.appendChild(
-      document.createElement('div')
-    );
+    var re = e.addE('div');
     re.addEventListener(
       'click',
       function (ev) {
@@ -136,7 +132,7 @@
       }.bind(this),
       true
     );
-    re.appendChild(document.createTextNode('RE'));
+    re.addT('RE');
 
     // If the focus is not on the text field anymore,
     // delegate focus to
diff --git a/dev/js/src/vc/unspecified.js b/dev/js/src/vc/unspecified.js
index 31101ef..daa7c88 100644
--- a/dev/js/src/vc/unspecified.js
+++ b/dev/js/src/vc/unspecified.js
@@ -23,10 +23,10 @@
      */
     create : function (parent) {
       var obj = Object.create(jsonldClass).
-	upgradeTo(this);
+	        upgradeTo(this);
 
       if (parent !== undefined)
-	obj._parent = parent;
+	      obj._parent = parent;
 
       return obj;
     },
@@ -38,24 +38,24 @@
 
       // Not replaceable
       if (this._parent === undefined)
-	return null;
+	      return null;
 
       // Set JSON-LD type
       var newDoc = docClass.create(this._parent, {
-	"@type" : "koral:doc",
-	"value" : "",
-	"key"   : v
+	      "@type" : "koral:doc",
+	      "value" : "",
+	      "key"   : v
       });
 
       // Unspecified document on root
       if (this._parent.ldType() === null) {
-	this._parent.root(newDoc);
-	this.destroy();
+	      this._parent.root(newDoc);
+	      this.destroy();
       }
 
       // Unspecified document in group
       else {
-	this._parent.replaceOperand(this, newDoc);
+	      this._parent.replaceOperand(this, newDoc);
       };
       this._parent.update();
       return newDoc;
@@ -68,13 +68,13 @@
     update : function () {
 
       if (this._element === undefined)
-	return this.element();
+	      return this.element();
 
       // Remove element content
-      _removeChildren(this._element);
+       _removeChildren(this._element);
 
       var ellipsis = document.createElement('span');
-      ellipsis.appendChild(document.createTextNode(loc.EMPTY));
+      ellipsis.addT(loc.EMPTY);
 
       // Click on empty criterion
       ellipsis.addEventListener('click', this.onclick.bind(this));
@@ -86,15 +86,15 @@
 
       // Set operators
       if (this._parent !== undefined && this.parent().ldType() !== null) {
-	var op = this.operators(
-	  false,
-	  false,
-	  true
-	);
-	
-	this._element.appendChild(
-	  op.element()
-	);
+	      var op = this.operators(
+	        false,
+	        false,
+	        true
+	      );
+	      
+	      this._element.appendChild(
+	        op.element()
+	      );
       };
 
       return this.element();
@@ -106,7 +106,7 @@
      */
     element : function () {
       if (this._element !== undefined)
-	return this._element;
+	      return this._element;
       this._element = document.createElement('div');
       this._element.setAttribute('class', 'doc unspecified');
       this.update();
@@ -123,17 +123,17 @@
 
       // Add key menu element at the correct position
       this._element.insertBefore(
-	menu.element(),	
-	this._element.firstChild
+	      menu.element(),	
+	      this._element.firstChild
       );
 
       var that = this;
 
       // Set released method
       menu.released(function (key, type) {
-	// Set chosen key and type - will return a doc
-	that.key(key).type(type).update();
-	this.hide();
+	      // Set chosen key and type - will return a doc
+	      that.key(key).type(type).update();
+	      this.hide();
       });
 
       menu.show();