如何在contenteditable区域的光标位置插入HTML元素？

当前代码使用append()方法会将元素固定添加到div末尾，要实现点击按钮前光标所在位置插入元素，核心是提前保存光标/选区状态，再通过原生Range API在对应位置插入节点，具体实现如下：

解决方案代码 #

完整HTML+JS代码 #

<button class="myBtn" id="myBtn">append content</button>
<div contenteditable="true" class="div_edit" id="div_edit">Lorem ipsum dolor sit amet</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
// 用于保存contenteditable中的光标/选区状态
let savedRange;

// 实时监听编辑区域的选区变化，保存光标位置
$("#div_edit").on("selectionchange", function() {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    savedRange = selection.getRangeAt(0);
  }
});

function append_content() {
  $("#myBtn").click(function(e) {
    // 如果没有保存的光标位置，直接返回
    if (!savedRange) return;

    // 创建要插入的元素（转为原生DOM节点，Range API仅支持原生节点）
    const insertElement = $('<span class="span-add">Add a link</span>')[0];

    // 恢复之前保存的选区
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(savedRange);

    // 在光标位置插入元素
    savedRange.insertNode(insertElement);

    // 可选：将光标移动到新插入元素的后方，提升编辑流畅度
    const newRange = document.createRange();
    newRange.setStartAfter(insertElement);
    newRange.collapse(true);
    selection.removeAllRanges();
    selection.addRange(newRange);
    savedRange = newRange; // 更新保存的光标位置
  });
}

// DOM加载完成后初始化函数
$(document).ready(function() {
  append_content();
});
</script>

关键逻辑说明 #

1. 保存光标状态：通过selectionchange事件监听contenteditable区域的选区变化，实时保存当前的Range对象（包含光标或选中内容的位置信息）。点击按钮时光标会离开编辑区域，必须提前记录位置。
2. 插入元素：点击按钮时，先恢复之前保存的选区，再调用Range的insertNode()方法，直接在光标位置插入元素。
3. 光标优化：插入后将光标移动到新元素后方，避免光标消失，让编辑体验更连贯。

注意事项 #

• 如果点击按钮前有选中内容，插入操作会替换选中的内容；若需保留选中内容，可以在插入前复制选中节点再处理。
• 原代码中的top/left定位逻辑已移除，因为元素是插入到文本流中的，而非绝对定位（如果需要浮动定位，可以单独给.span-add添加CSS定位规则）。

内容的提问来源于stack exchange，提问作者Kyv