contenteditable元素childNodes丢失节点？段落包裹内容异常排查

问题原因 #

你遇到的节点丢失问题，根源在于直接遍历动态的NodeList（conteneur.childNodes）：当你把节点从父元素移动到<p>中时，childNodes集合会实时更新，导致for...of遍历过程中跳过部分节点（比如示例里的"H"、"O"文本节点，以及<td>中部分<a>标签）。

修改方案 #

将动态的childNodes转换为静态数组，确保遍历的是初始状态下的所有节点，不受后续节点移动的影响。只需修改遍历的集合即可，保留你原有的代码结构：

var conteneur = document.querySelector('th');
var paragraphe = '';
// 把动态的NodeList转为静态数组，避免遍历异常
for (const noeud of Array.from(conteneur.childNodes)) {
    if (noeud.nodeName.toLowerCase() != 'p') {
        if (paragraphe == '') {
            paragraphe = document.createElement('p');
            conteneur.insertBefore(paragraphe, noeud);
        }
        paragraphe.appendChild(noeud);
    }
    else {
        paragraphe = '';
    }
}

效果验证 #

运行修改后的代码，<th>内的所有子节点（文本节点和<sub>标签）都会被正确包裹到<p>中，得到预期结果：

<th class="section" colspan="4"><p>Formule brute C<sub>10</sub>H<sub>14</sub>O</p></th> 

对于<td>中部分<a>标签未被包裹的问题，只需将选择器替换为对应的<td>元素，同样使用Array.from(conteneur.childNodes)遍历即可解决。

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