How to wrap subsections of a DOM paragraph element in a without using innerHTML property?

Given a paragraph as a DOM Node:

<p class="trackMouseenter" id="paragraph-1">The missile knows where it is at all times. It knows this because it knows where it isn't. </p>

I’d like to use the DOM JavaScript API to wrap a specific subsection of that paragraph in <span> tags. Is there a way to wrap a section of text inside a

element without using the innerHTML property of the respective paragraph?

I am aware of the Element.insertAdjacentHTML() and the Element.insertAdjacentText methods of a respective element.

insertAdjacentHTML, does not allow for inserting arbitrary Elements into a text node. It will either insert elements before or after the node in the DOM tree, or at the beginning or end of the text inside the paragraph. Furthermore, it will only append well formed HTML, meaning that a closing tag is always appended, even if not explicitly typed in code.

Example for insertAdjacentHTML

insertAdjacentText does something unexpected, as in that at least for me (Firefox 108.01) it will insert Text according to the documentation, but weirdly, any HTML will be sanitized and displayed as text (a good thing if you ask me, but I expected the unsanitized text to appear as HTML). Example for insertAdjacentText:

Example for insertAdjacentText

For both examples, please hover over the paragraph a bunch of times to see the effect.
In order to see the result of the insertAdjacentHTML example, please point your browsers element inspector at the respective

element. CodePen unfortunately lacks such a functionality.

My current solution involves modifying the innerHTML property of the target element inside the event handler I created, but I feel like this is a mediocre solution at best. innerHTML is very succeptible to XSS attacks and feels like a shoddy solution to the problem. It also seems to mess with my browsers change detection, as entering the mouse on the element begins to trigger the console.log() in the beginning hundreds of times.

My code using innerHTML right now:

Array.prototype.forEach.call(paragraphs,
                            item => {
  item.addEventListener('mouseenter', (event) => {
    console.log("triggeredMouseEnter")
    event.target.style.backgroundColor = "red";
    const parapgraphText = event.target.innerText;
    const spanInsertBegin = '<span class="mouseoverMarker">';
    const spanInsertEnd = "</span>"
    
    const sliceToWrap = event.target.innerText.slice(0, event.target.innerText.length);
    
    let textToInsert = parapgraphText;
    
    textToInsert = textToInsert.padStart(textToInsert.length + spanInsertBegin.length, spanInsertBegin)
    textToInsert = textToInsert.padEnd(textToInsert.length + spanInsertEnd.length, spanInsertEnd)
    
    event.target.innerHTML = textToInsert
     
    
  })

This answer references “Phrasing Content” in the whatwg specification. <p> elements are however not listed under those tags only supporting phrasing content, meaning it should also be possible to insert child elements directly into existing text. I am however not that familiar with the whatwg standard to put this into context, meaning I can’t adequately assert if my oppinion is true.