How to insert Node based on css class in JS?

Question

I have this code that highlights the text selection. It wraps the text that was selected within a passage and then adds <span style='background:yellow'> text selected </span> I want to accomplish the exact same task, but instead, do this:

<span class='blue_mark'> text selected </span>

How can I accomplish this within the following code:

var selection = document.getSelection();
  var range = selection.getRangeAt(0);
  var contents = range.extractContents();
  var node = document.createElement('span');
  node.style.backgroundColor = "yellow";
  node.appendChild(contents);
  range.insertNode(node);
  selection.removeAllRanges(); //Clear the selection, showing highlight

No, how do you use addClass() with insertNode? I know how to use it in other causes: `$("#id").addClass("example");` — Great Day Today, Sep 02 '16 at 13:46
http://stackoverflow.com/questions/507138/how-do-i-add-a-class-to-a-given-element — MegaMind, Sep 02 '16 at 13:47

colecmc · Accepted Answer · 2016-09-02T13:49:28.923

1

If you just want a class instead of a style attribute, use this by replacing node.style. backgroundColor = "yellow"; with node.classList.add('blue_mark'); or node.className += ' blue_mark';.

edited Sep 02 '16 at 13:49

answered Sep 02 '16 at 13:46

colecmc

3,133
2
20
33

Don't forget the space: `node.className += ' blue_mark';` – Jeremy J Starcher Sep 02 '16 at 13:48

How to insert Node based on css class in JS?

1 Answers1