Question

我有一些更复杂的代码，有一种奇怪的行为，我已经设法在这里重现：

<!DOCTYPE html>
<html>
<body>
    <div>things</div>
    <div>stuff</div>
    <div>other</div>
    <div>misc</div>
    <script>
        var forEach = function (array, callback, scope) {
            for (var i = 0; i < array.length; i++) {
                callback.call(scope, array[i], i);
            }
        }
        var d = document.querySelectorAll('div');
        d[1].o = d[1].textContent;
        forEach(d, function (el, i) {
            d[1].innerHTML += '<p>div things</p> sdf d';
            document.body.innerHTML += '<div>new div</div> fdsffsd fsdf';
            alert(d[1].o);
        });
    </script>
</body>
</html>

我应该收到4个提醒，每个提示＆＃34;东西＆＃34;。我这样做，直到我做一个硬刷新，然后正常刷新。然后只有第一个警报说＆＃34; stuff＆＃34;，其他人说＃34; undefined＆＃34;。看来＆＃34; o＆＃34;正在添加到div[1]的属性未被保留。它似乎与在循环中添加到innerHTML的{{1}}有关。 body添加到innerHTML似乎没有问题。

我看不出问题所在。此外，这似乎只发生在Chrome（v43）而不是Firefox中。

有什么想法吗？

Answer 1

当身体的innerHTML被更新时发生这种情况的原因是身体的整个内部HTML需要被重新解析。这意味着任何附加到任何元素的自定义属性都会丢失，因为正在重新创建这些DOM元素。

因此，除非您确定知道自己在做什么，否则应该不会将innerHTML与+ =运算符一起使用。

为什么它甚至有时工作是一个谜......

循环后

1 个答案: