У меня есть расширение, где я храню/извлекаю раздел структуры DOM (всегда выбор текста на экране), который выбрал пользователь. Когда я сохраняю выбор, я заключу раздел в теге SPAN и выделяю текст желтым цветом. Это заставляет структуру DOM вокруг выделенного текста разбиваться на различные текстовые узлы. Это вызывает проблему для меня, так как когда я пытаюсь восстановить этот выбор (без обновления страницы), это вызывает проблемы по мере изменения структуры DOM.
Мой вопрос заключается в том, как предотвратить разделение структуры DOM после вставки SPAN? Если этого не может быть достигнуто, как мне собрать структуру DOM после удаления тега SPAN в исходное состояние?
//Insert the span
var sel = restoreSelection(mootsOnPage[i].startXPath);
var range = sel.getRangeAt(0).cloneRange();
var newNode = document.createElement('span');
newNode.className = 'highlightYellow';
range.surroundContents(newNode);
//Original DOM structure
<p>Hello there, how are you today</p>
//What the DOM looks like after insertion of SPAN
<p>
"Hello there, "
<span class="highlightYellow">how</span
" are you today"
</p>