diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index 4553d97..b23e309 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -445,7 +445,7 @@
     });
 
 
-    it('should\'nt be parsable (async)', function () {
+    xit('should\'nt be parsable (async)', function () {
       expect(table1).not.toBeTruthy();
     });
 
diff --git a/dev/js/spec/queryCreatorSpec.js b/dev/js/spec/queryCreatorSpec.js
index 59547ef..21fffac 100644
--- a/dev/js/spec/queryCreatorSpec.js
+++ b/dev/js/spec/queryCreatorSpec.js
@@ -64,7 +64,7 @@
     "          <th>Der</th>" +
     "          <th>älteste</th>" +
     "          <th>lebende</th>" +
-    "          <th>Baum</th>" +
+    "          <th class=\"mark\">Baum</th>" +
     "        </tr>" +
     "      </thead>" +
     "      <tbody>" +
@@ -74,7 +74,7 @@
     "          <td>ART</td>" +
     "          <td>ADJA</td>" +
     "          <td>ADJA<br>ADJD</td>" +
-    "          <td class=\"matchkeyvalues\">" +
+    "          <td class=\"matchkeyvalues mark\">" +
     "            <div>case:nom</div>" +
     "            <div>gender:masc<br/>gender:fem</div>" +
     "            <div>number:sg</div>" +
@@ -91,7 +91,7 @@
     "          </td>" +
     "          <td>ADJA</td>" +
     "          <td></td>" +
-    "          <td>NN</td>" +
+    "          <td class=\"mark\">NN</td>" +
     "        </tr>" +
     "      </tbody>" +
     "    </table>";
@@ -581,5 +581,23 @@
       expect(cell.classList.contains("chosen")).toBeTruthy();
       expect(qc.toString()).toEqual("[opennlp/p='morphemes:.::_SORSZ \\\\ZERO::NOM \\\'period::PUNCT\\\'']");
     });
+
+    it('should respect marked elements', function () {
+      var matchTable = matchTableComplexFactory();
+      var qc = qcClass.create(matchTable);
+      expect(qc.toString()).toEqual("");
+
+      var cell = matchTable.querySelector("thead > tr > th:nth-child(6)");
+      expect(cell.classList.contains("mark")).toBeTruthy();
+      expect(cell.classList.contains("chosen")).toBeFalsy();
+
+      cell.click();
+      expect(cell.classList.contains("mark")).toBeTruthy();
+      expect(cell.classList.contains("chosen")).toBeTruthy();
+
+      cell.click();
+      expect(cell.classList.contains("mark")).toBeTruthy();
+      expect(cell.classList.contains("chosen")).toBeFalsy();
+    });
   });
 });
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index 42a0b62..78a422b 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -235,7 +235,7 @@
 
                     // Add annotation to string
                     this._addToToken(i, annotation);
-                    keyvaluepair.className = 'chosen';
+                    keyvaluepair.classList.add('chosen');
                   };
                 };
               }
@@ -250,7 +250,7 @@
 
                   // Add annotation to string
                   this._addToToken(i, annotation);
-                  sib.className = 'chosen';
+                  sib.classList.add('chosen');
                 };
               }
 
@@ -351,13 +351,13 @@
 
     // Add term to token if not yet chosen, otherwise remove
     toggleInToken : function (node, index, term) {
-      if (node.className == 'chosen') {
+      if (node.classList.contains('chosen')) {
         this._removeFromToken(index, term);
-        node.className = '';
+        node.classList.remove('chosen');
       }
       else {
         this._addToToken(index, term);
-        node.className = 'chosen';
+        node.classList.add('chosen');
       };
     },