为什么这段代码在FireFox和IE中不起作用，但在Chrome中却有效

Why Doesn't This Code Work in FireFox and IE but does in Chrome?

本文关键字：不起作用 IE 但在 有效 Chrome FireFox 段代码 代码 为什么      更新时间：2023-09-26

我目前正在使用以下代码：

代码可以在这里看到 - http://jsbin.com/ESOdELU/1/edit

var wordRandomizer = {
    run: function (targetElem) {
        var markup = this.createMarkup();
        targetElem.appendChild(markup);
    },
    createMarkup: function () {
        var that = this;
        var frag = document.createDocumentFragment();
        this.elem = document.createElement('span');
        var button = document.createElement('button');
        button.innerText = 'Change Item';
        button.addEventListener('click', function () {
            that.changeItem();
        });
        frag.appendChild(this.elem);
        frag.appendChild(button);
        return frag;
    },
    changeItem: function () {
        var rand = this.getRandInt(1, this.items.length) - 1;
        console.log(rand);
        this.elem.innerText = this.items[rand];
    },
    getRandInt: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    items: ['itemA', 'itemB', 'itemC', 'itemD']
};
wordRandomizer.run(document.body);

代码在Chrome中工作正常，但在FireFox中，按钮显示非常小并且不起作用，而在IE中代码根本不起作用。

问题就在这里：

button.innerText = 'Change Item';

innerText不是有效的 DOM 属性。某些浏览器可能支持它，但它是非标准的，不应使用。

您可以将innerText替换为：

  • textContent（这是直接符合标准的等价），

或与

  • innerHTML（有点不同，但在您的示例中是相同的，并且与旧版浏览器兼容）
相关文章：