JavaScript 在用户选中文本末尾插入带class的div样式不生效问题求解

你代码里的while ((node = div.firstChild))逻辑仅提取了div内部的纯文本节点插入到DOM，带highlighted类的div元素本身没有被插入页面，自然不会触发对应的样式规则。你直接调用document.body.appendChild(div)时是将整个div元素插入DOM，所以样式可以正常生效。

不需要单独提取div的子节点，直接将整个div元素插入选区即可，如果你不需要块级元素换行效果，也可以将div替换为行内元素span。

修正后的核心逻辑 #

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);
  // 直接插入完整的div元素
  range.insertNode(div);
}

完整可运行代码 #

<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
  .highlighted {
    background: #ccc;
    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 sel, range;
    if (window.getSelection) {
        var div = document.createElement("span"); // 换span可实现同行显示
        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);
            range.insertNode(div);
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().text = mytext;
    }
}
</script>
</html> 

内容的提问来源于stack exchange，提问作者Kelly o'Brien