Inline JavaScript works in Chrome but not in Firefox

Question

I have a page layout in which I have created HTML table structure. In between, I want to display static text if the td is empty. My code is simple:

<td> 
    <div id="dvCountry">
        <SharePointWebControls:FieldValue FieldName="Country" DisableInputFieldLabel="true" runat="server"></SharePointWebControls:FieldValue></div>
    <div id="dvOffice">,<SharePointWebControls:FieldValue FieldName="Office" DisableInputFieldLabel="true" runat="server"></SharePointWebControls:FieldValue></div>
    <script type="text/javascript">
            var td = document.getElementById("dvCountry");
            if(td.innerText.length == 0){
                td.innerText = "Group";
                var divOffice = document.getElementById("dvOffice");
                divOffice.innerText = "";
            }

    </script>
</td>

The above code is working fine in IE, and Chrome but not working in Firefox.

What am I missing?

Answer 1

The issue comes from innerText.
See: 'innerText' works in IE, but not in Firefox

You should use jQuery or use innerHTML.