JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<a href="#" onclick="Add()">Add Span</a>

<div id="content">Lorem ipsum dolor sit amet, <span class="cls1">consectetur adipisicing</span> elit,</div>

CSS

.cls1 {
    color: blue;
}
.cls1 .cls1 {
    color: red;
}

JavaScript

function Add() {
     var selObj = window.getSelection();
     var selRange = selObj.getRangeAt(0);
     if ("cls1" !== selObj.anchorNode.parentNode.className &&
         "span" !== selObj.anchorNode.parentNode.tagName.toLowerCase() && 
         "cls1" !== selObj.focusNode.parentNode.className &&
         "span" !== selObj.focusNode.parentNode.tagName.toLowerCase()) {
         var newElement = document.createElement("span");
         newElement.setAttribute("class", "cls1");
         var documentFragment = selRange.extractContents();
         newElement.appendChild(documentFragment);
         selRange.insertNode(newElement);
         selObj.removeAllRanges();
     }
 }