JavaScript：在contentEditable中插入节点后如何获取注入节点？

问题描述 #

我正在开发一款WYSIWYG编辑器，用户可通过外部按钮在任意位置插入文本。现有一个contentEditable div，示例内容为<div>123<span>123</span>4567890</div>。我使用以下代码在光标位置插入span元素：

var t = document.createElement("span");
t.textContent = "myElement";
range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(t);

插入后的输出示例为<div>123<span>123</span>4567<span>myElement</span>890</div>。请问如何获取这个注入的节点？目前使用injectedElement = window.getSelection().anchorNode得到的是整个div的内容，我仅需要获取<span>myElement</span>这个节点。

解决方案 #

直接利用创建节点时的引用是最简便的方式：

• 你在创建<span>节点时已经持有了它的引用（变量t），只需要把这个引用保存下来，后续就能直接访问该节点：

  // 定义变量存储注入的节点（可根据场景设为全局变量或类属性）
  let injectedSpan;
  
  // 插入节点的逻辑
  var t = document.createElement("span");
  t.textContent = "myElement";
  range = window.getSelection().getRangeAt(0);
  range.deleteContents();
  range.insertNode(t);
  // 保存节点引用
  injectedSpan = t;
  

如果必须通过选区获取，可在插入后调整选区范围，定位到新节点内部再获取：

var t = document.createElement("span");
t.textContent = "myElement";
range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(t);

// 创建新选区并选中刚插入的span内容
const newRange = document.createRange();
newRange.selectNodeContents(t);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(newRange);

// 获取目标节点
const injectedElement = selection.anchorNode.parentElement;

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