How to tell when a dynamically created element has rendered

Question

I need to accurately measure the dimensions of text within my web app, which I am achieving by creating an element (with relevant CSS classes), setting its innerHTML

Answer 1

suppose your element has classname class="test" The following function continue test if change has occured if it does, run the function

        function addResizeListener(elem, fun) {
            let id;
            let style = getComputedStyle(elem);
            let wid = style.width;
            let hei = style.height;
            id = requestAnimationFrame(test)
            function test() {
                let newStyle = getComputedStyle(elem);
                if (wid !== newStyle.width ||
                    hei !== newStyle.height) {
                    fun();
                    wid = newStyle.width;
                    hei = newStyle.height;
                }
                id = requestAnimationFrame(test);
            }
        }
        let test = document.querySelector('.test');
        addResizeListener(test,function () {
            console.log("I changed!!")
        });