Changing element's HTML before it's inserted in the DOM

Question

Is it possible to change an element's inner HTML before it is inserted in the DOM? I already tried doing this with MutationObserver but the problem is that you can see the element's HTML visually changing, is there a way to do this before DOM insertion altogether?

var observer = new MutationObserver(function(mutations) {

    mutations.forEach(function(mutation) {
        mutation.addedNodes[0].innerHTML = "....";
    });    
});

// Notify me of everything!
var observerConfig = {
    attributes: true, 
    childList: true, 
    characterData: true 
};

var targetNode = document.querySelector("ul#myElement");
observer.observe(targetNode, observerConfig);

Answer 1

You can try having the whole body as CSS display:none, change whatever you want and then bring it back to display:block