CheckBalanceController.js

({
    /**
     * Read the balance from div container of your org's component (c namespace)
     * */
    checkBalance : function(component, event, helper) {
        if(document.querySelector('#c-mybalance')){
            //Successfully read the data
            const htmlData = document.createElement('div');
            htmlData.style.color = "red";
            htmlData.textContent = "Haaa!!! GOTCHA!! Here is your balance: ";
            
            const strongElement = document.createElement('strong');
            strongElement.textContent = document.querySelector('#c-mybalance').innerHTML;
            htmlData.append(strongElement);
            document.querySelector('#SFFscts-output').append(htmlData);
            
            component.set("v.color", "red");
            /*
             * Short form to write above code
             * ===================================
                document.querySelector('#SFFscts-output').innerHTML = 
                    "<div style='color:red;>Haaa!!! GOTCHA!! Here is your balance: <strong>"+
                    document.querySelector('#c-mybalance').innerHTML+
                    "</strong></div>";
                ==================================
              * */
        } else{
            //Could not read the data
            document.querySelector('#SFFscts-output').textContent = "YOU GOT ME!!! Please don't tell this to Benioff";
            component.set("v.color", "green");
            /*
             * Short form to write above code
             * ===================================
                document.querySelector('#SFFscts-output').textContent = 
                    "<div style='color:green;'><p>YOU GOT ME!!! Please don't tell this to Benioff</p></div>";
               ==================================
             * */
        }
    }
})