Why doesn't `.innerText` property work in Firefox?

Question

The following code does not work in Firefox

var selectedCategories = $("#category_filter .checkbox-input-group .checked").find("span");
for (var i = 0; i < selectedCategories.length; i++) {
    categories.push(selectedCategories[i].innerText);
} 

Please tell me how I can get a similar result

Answer 1

innerText is a non-standard property and Firefox doesn't support it, you should use textContent instead. However, it should be noted that IE8 and below do not support the textContent property.

I would suggest using jQuery .eq() and .text() methods:

categories.push(selectedCategories.eq(i).text());

Also note that for creating arrays you can also use the jQuery .map() method:

var arr = selectedCategories.map(function() {
     return $(this).text();
     // Alternatively:
     // return (this.innerText || this.textContent);
}).get();

Answer 2

 var selectedCategories = $("#category_filter .checkbox-input-group .checked").find("span").length;
 var categories = [];

    for (var i = 0; i < selectedCategories; i++) {
        categories.push(selectedCategories[i].innerText);
}