children.innerText is not working in firefox

Question

i have a html like this:

<div class="tree" id="divTreeViewIncomeDetails" style="height: auto;">
            <li><span class="fa fa-folder-open highlight" id="3" onmouseover="visibleLink('3', 'Incomes', '0')" onmouseout="hideLink('3')"><span onclick="GetTreeViewChartOfAccountsByParam('3', 'Incomes')">Incomes </span><span class="closingbalance">INR 50.00Dr </span></span>
                <ul>
                    <ul>
                        <li><span class="fa fa-file chartwidth" id="84" onmouseover="visibleLink('84', 'Sales A/c', '1')" onmouseout="hideLink('84')" onclick="ViewLedgerMsg(84)"><span onclick="GetTreeViewChartOfAccountsByParam('84', 'Sales A/c')">Sales A/c </span><span class="closingbalance">INR 50.00Dr </span></span></li>
                    </ul>
                    <ul>
                        <li><span class="fa fa-folder-open chartwidth" id="98" onmouseover="visibleLink('98', 'Indirect Income', '1')" onmouseout="hideLink('98')"><span onclick="GetTreeViewChartOfAccountsByParam('98', 'Indirect Income')">Indirect Income </span><span class="closingbalance">INR 0.00Cr </span></span>
                            <ul>
                                <ul>
                                    <li><span class="fa fa-file chartwidth" id="99" onmouseover="visibleLink('99', 'Realized Exchange Gain', '2')" onmouseout="hideLink('99')" onclick="ViewLedgerMsg(99)"><span onclick="GetTreeViewChartOfAccountsByParam('99', 'Realized Exchange Gain')">Realized Exchange Gain </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                                </ul>
                                <ul>
                                    <li><span class="fa fa-file chartwidth" id="122" onmouseover="visibleLink('122', 'Rounding off Gain A/c', '2')" onmouseout="hideLink('122')" onclick="ViewLedgerMsg(122)"><span onclick="GetTreeViewChartOfAccountsByParam('122', 'Rounding off Gain A/c')">Rounding off Gain A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                                </ul>
                                <ul>
                                    <li><span class="fa fa-file chartwidth" id="124" onmouseover="visibleLink('124', 'Discount Received A/c', '2')" onmouseout="hideLink('124')" onclick="ViewLedgerMsg(124)"><span onclick="GetTreeViewChartOfAccountsByParam('124', 'Discount Received A/c')">Discount Received A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                                </ul>
                                <ul>
                                    <li><span class="fa fa-file chartwidth" id="140" onmouseover="visibleLink('140', 'Stock Income', '2')" onmouseout="hideLink('140')" onclick="ViewLedgerMsg(140)"><span onclick="GetTreeViewChartOfAccountsByParam('140', 'Stock Income')">Stock Income </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                                </ul>
                            </ul>
                        </li>
                    </ul>
                    <ul>
                        <li><span class="fa fa-file chartwidth" id="134" onmouseover="visibleLink('134', 'Clearing And Forwarding Rcd', '1')" onmouseout="hideLink('134')" onclick="ViewLedgerMsg(134)"><span onclick="GetTreeViewChartOfAccountsByParam('134', 'Clearing And Forwarding Rcd')">Clearing And Forwarding Rcd </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                    </ul>
                    <ul>
                        <li><span class="fa fa-file chartwidth" id="135" onmouseover="visibleLink('135', 'Transport charges received ', '1')" onmouseout="hideLink('135')" onclick="ViewLedgerMsg(135)"><span onclick="GetTreeViewChartOfAccountsByParam('135', 'Transport charges received ')">Transport charges received  </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                    </ul>
                    <ul>
                        <li><span class="fa fa-file chartwidth" id="156" onmouseover="visibleLink('156', 'Sales Discount A/c', '1')" onmouseout="hideLink('156')" onclick="ViewLedgerMsg(156)"><span onclick="GetTreeViewChartOfAccountsByParam('156', 'Sales Discount A/c')">Sales Discount A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                    </ul>
                    <ul>
                        <li><span class="fa fa-file chartwidth" id="158" onmouseover="visibleLink('158', 'Stock Income A/c', '1')" onmouseout="hideLink('158')" onclick="ViewLedgerMsg(158)"><span onclick="GetTreeViewChartOfAccountsByParam('158', 'Stock Income A/c')">Stock Income A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                    </ul>
                    <ul>
                        <li><span class="fa fa-file chartwidth" id="163" onmouseover="visibleLink('163', 'Exchange Gain A/c', '1')" onmouseout="hideLink('163')" onclick="ViewLedgerMsg(163)"><span onclick="GetTreeViewChartOfAccountsByParam('163', 'Exchange Gain A/c')">Exchange Gain A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                    </ul>
                </ul>
            </li>
            <li><span class="fa fa-arrow-down" style="width: 100%; color: red; font-weight: 700;"><span>Net Loss </span><span class="closingbalance">14,950.00Cr</span></span></li>
        </div>

Now i need to get the innertext of

For that i m doing this:

var items = [];
            var inputData = $('#divTreeViewIncomeDetails').find('li > span');

            for (var i = 0; i < inputData.length; i++) {
                var position, data1, data2;
                position = inputData[i].className;
                data1 = inputData[i].children['0'].innerText.trim();
                data2 = inputData[i].children['1'].innerText.trim();
                var item = { position: position, data1: data1, data2: data2 }
                items.push(item);
            }

Its working fine in IE,Chrome,Safari,Opera

But NOT in FIREFOX!!!

data1 = inputData[i].children['0'].innerText.trim();

this line i m not get the values in FF, its skips the code

Is there any alternate code for this ?

Just curious, You are using jQuery and still binding events using inline event handler. — Satpal, Sep 18 '14 at 14:14

score 2 · Answer 1 · answered Sep 18 '14 at 14:21

innerText isn't implemented in FireFox innerText isn't official. You might want to use textContent which I believe works in all browsers

edit: (docs says it works in IE9 and up)

See documentation: link

Small quote from the docs

Differences from innerText

Internet Explorer introduced element.innerText. The intention is pretty much the same with a couple of differences:

Note that while textContent gets the content of all elements, including and elements, the mostly equivalent IE-specific property, innerText, does not. innerText is also aware of style and will not return the text of hidden elements, whereas textContent will. As innerText is aware of CSS styling, it will trigger a reflow, whereas textContent will not

score 1 · Accepted Answer · answered Sep 18 '14 at 14:20

1

Use textContent instead of innerText

answered Sep 18 '14 at 14:20

Joe Mike

1,150
1
9
16

`textContent` isn't available in all versions of IE – Ian Sep 18 '14 at 14:22

children.innerText is not working in firefox

2 Answers2

Linked