У меня есть расширение, в котором я сохраняю / извлекаю раздел структуры 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>