Inject HTML into React/Next.js Site

I have been tasked with improving the UI/UX for an external service that runs on React (Next.js). This company says the only customization they offer is a text editor for JavaScript, and to inject changes there. The problem is, I cannot seem to attach to the virtual dom. This text editor creates a JavaScript file, which is then loaded right below the <body> element.

Am I missing something, or is this not possible?

const nav = document.getElementsByClassName('userbar-wrapper')[0];
nav.insertAdjacentHTML('afterend', 'additional HTML code');

I’m getting the following error:

Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of undefined

Answer

I can’t add a comment due to low rep, however it looks like you’re causing a side effect, you therefore want to wrap your code in a useEffect() hook, something like the below.

useEffect(() => {
    const nav = document.getElementsByClassName('userbar-wrapper')[0];
    nav.insertAdjacentHTML('afterend', 'additional HTML code');
}, []);