Necesito agregar mediante programación algo de texto al final de una selección de texto realizada por el usuario. Mi código funciona bien, excepto que no puedo aplicar la clase al elemento recién insertado (un div). Si inserto el nuevo div en el cuerpo (document.body.appendChild(div)), la clase se aplica correctamente, por lo que debe haber algún problema en la forma en que agrego el div a la lista de materiales después de la selección. Aquí se agrega el texto 'TEXT-TO-APPEND', pero no la clase.
var div = document.createElement("div"); div.className = ('highlighted'); let text = document.createTextNode('TEXT-TO-APPEND'); div.appendChild(text); sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = window.getSelection().getRangeAt(0); range.collapse(isBefore); var frag = document.createDocumentFragment(), node, lastNode; while ((node = div.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); }Un ejemplo de trabajo completo es este
<title>Page Title</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href=""> <style> .highlighted { background: #ccc; /*font-size: 18px;*/ color: red; } </style> <body> <input id="clickMe" type="button" value="clickme" onclick="insertHtmlAtSelectionEnd(' (my text) ', false);" /> <div class=""> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </div> </body> <script> function insertHtmlAtSelectionEnd(mytext, isBefore) { var text = ""; var sel, range, node; if (window.getSelection) { var div = document.createElement("div"); div.className = ('highlighted'); let textElement = document.createTextNode(mytext); div.appendChild(textElement); sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = window.getSelection().getRangeAt(0); range.collapse(isBefore); var frag = document.createDocumentFragment(), node, lastNode; while ( (node = div.firstChild) ) { lastNode = frag.appendChild(node); } range.insertNode(frag); } } else if (document.selection && document.selection.type != "Control") { text = document.selection.createRange().text; } } </script> </html>