How to append HTML element to telegra.ph P element?

Question

I'm building a chrome extension and I want to append some elements to this telegram page and it seems that only the text is being appended successfully and not the entire HTML.

const span = document.createElement("span");
span.innerHTML = '<span class="xxx">Foo,bar</span>';
const p = document.querySelector("p");
p.appendChild(span);

Answer 1

As suggested in the comments, I verified myself that there is actually a MutationObserver that changes in real time when some code tries to change something at a certain point in the document tree dom.

Because there is no standard way to find the live MutationObservers instance listening on the dom (if any), unless you can work hard to find in what scope the variable holding the object is; the fastest way is to replace the body with a clone of it element, all MutationObserver will disappear.

document.body = document.body.cloneNode(true);

Once you've done this, when you try to attach an element to the dom, it will change accordingly without interference.

To be fair...

Found the last clue in a Stack Overflow answer when looking for how to get a live MutationObserver instance or what is the working method to solve this requirement?

Is there a way to remove all mutationObservers from the project without referencing it?