Manually placing div start and end tags with javascript

I use Madcap Flare to write web help. This comes with useful proxies that auto-generate navigation when built. I need to manipulate one of these proxies. This is important because I have to work within the structure they use, and can’t just add my div in the html as usual.

PLEASE NOTE: I cannot directly change the html in this situation. I can only add css or javascript.

So here’s the problem. I need to add <div class="eplanation-wrapper"> before <p class="explanation-heading"> and it’s closing </div> after the last <p class="explanation-item">.

I’ve gotten the selectors to work and place the inserts in the correct places, but they are registering as strings, not code.

(The other heading/item class pairings will get the same treatment)

<div class="MCRelationshipsProxy_0">
    <p class="explanation-heading">Related Articles</p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="howTo-heading">How To Guides</p>
    <p class="howTo-item"><a href="">link</a></p>
    <p class="reference-headaing">Reference Articles</p>
    <p class="reference-item"><a href="">link</a></p>
</div>

<script>
    const explanationHeading = document.querySelector('p.explanation-heading');
    explanationHeading.before('<div class="explanation-wrapper">');

    const explanationItem = document.querySelectorAll('p.explanation-item');
    const lastExplanationItem = explanationItem[explanationItem.length - 1];
    lastExplanationItem.after('</div>');
</script>

Current broken state:
current broken state

GOAL :

<div class="MCRelationshipsProxy_0">
    <div class="explanation-wrapper"><p class="explanation-heading">Related Articles</p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p>
    <p class="explanation-item"><a href="">link</a></p></div>
    <p class="howTo-heading">How To Guides</p>
    <p class="howTo-item"><a href="">link</a></p>
    <p class="reference-headaing">Reference Articles</p>
    <p class="reference-item"><a href="">link</a></p>
</div>

I have tried:

before() after()

prepend() append()

insertAdjacentHTML(beforebegin / afterend)

insertAdjacentText(beforebegin / afterend)