contenteditable div按下Enter后，如何生成带空行的同级div代码结构？

现有一个带contenteditable属性的div，初始内部HTML代码如下：

<div class='dg'>lorem ipsum</div>

将光标定位至该行末尾并按下Enter键后，生成的HTML代码为：

<div class='dg'>lorem ipsum</div><div class='dg'><br></div>

请问如何实现按下Enter键后，生成如下带有空行间隔的HTML结构：

<div class='dg'>lorem ipsum</div>

<div class='dg'><br></div>

直接通过监听contenteditable元素的键盘事件，拦截Enter键的默认行为，手动构建带空行的DOM结构即可：

• 给目标contenteditable元素绑定keydown事件，判断按下的是Enter键
• 阻止浏览器默认的Enter键行为，避免生成连续无间隔的div
• 在当前.dg元素后插入包含换行的文本节点，再添加新的.dg元素
• 重置光标位置到新生成的.dg元素内，保证后续输入正常

示例代码：

const editableBox = document.querySelector('[contenteditable="true"]');

editableBox.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    
    // 确认当前光标在.dg元素内
    const selection = window.getSelection();
    const currentDg = selection.anchorNode.parentElement;
    if (!currentDg.classList.contains('dg')) return;
    
    // 创建换行文本节点
    const lineBreakNode = document.createTextNode('\n\n');
    // 创建新的.dg元素
    const newDg = document.createElement('div');
    newDg.className = 'dg';
    newDg.innerHTML = '<br>';
    
    // 插入节点到DOM中
    currentDg.after(lineBreakNode);
    lineBreakNode.after(newDg);
    
    // 把光标定位到新的.dg元素内
    const range = document.createRange();
    range.selectNodeContents(newDg.firstChild);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

如果你的contenteditable元素有其他自定义逻辑，需要调整节点判断条件，避免出现冲突。

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