My JavaScript code isn't working properly in Mozilla Firefox

I have a to-do list application on my website that I built using JavaScript. It works perfectly in Google Chrome, but it doesn't work in Mozilla Firefox. I have read that each browser interprets JavaScript differently, but I haven't been able to pinpoint exactly what the problem is in the code.

So, what happens in Firefox is this: When you type something into the text input and click the "Add Task" button, it does show that a task has been added. However, the label appears blank, as do the Edit and Delete buttons. All of the functionality appears to work as normal (the Edit and Delete buttons work properly, they just don't display the text).

In the code, the each list item is created by a function called createTask. Its code is:

var createTask = function(taskString) {
    // taskString is the value of the text input (whatever the user wants the task to read)

    // Create Elements
    var listItem = document.createElement("li");
    var checkbox = document.createElement("input");
    var label = document.createElement("label");
    var editInput = document.createElement("input");
    var editButton = document.createElement("button");
    var deleteButton = document.createElement("button");

    // Modify Elements
    checkbox.type = "checkbox";
    label.innerText = taskString;
    editInput.type = "text";
    editButton.innerText = "Edit";
    deleteButton.innerText = "Delete";

    // Add Event Listeners
    checkbox.addEventListener("change", markTask);
    editButton.addEventListener("click", editTask);
    deleteButton.addEventListener("click", deleteTask);

    // Append the Elements to the List Item
    listItem.appendChild(checkbox);
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(deleteButton);
    listItem.appendChild(editButton);

    return listItem;
}

Then, the function addTask appends listItem to the unordered list that is the tasks list.

var addTask = function() {

    if (addInput.value === "") {
        addError.style.display = "block"; // Display error message if no input
    } else {
        addError.style.display = "none"; // Stop displaying error message
        var listItem = createTask(addInput.value); // Put user input into createTask function
        tasksList.appendChild(listItem); // Add the new list item to the unordered list
        addInput.value = ""; // Reset the text input field to blank
        addInput.focus();
    }
}

Looking more closely, within the createTask function, there is:

    label.innerText = taskString;
    editButton.innerText = "Edit";
    deleteButton.innerText = "Delete";

So, I thought that the innerText property may not work properly in Firefox, but I tried changing it to innerHTML and textContent, and that doesn't work either!

Any ideas?

innerText is deprecated. Try using textContent instead.

This issue has been described here: 'innerText' works in IE, but not in Firefox