jquery replaceWith 在谷歌浏览器上不起作用答案

【问题标题】：jquery replaceWith not working on google chromejquery replaceWith 在谷歌浏览器上不起作用
【发布时间】：2012-01-23 06:47:06
【问题描述】：

我在使用 Google Chrome 中的 javascript 动态替换控件时遇到了一个奇怪的问题。被替换的控件不会显示在 UI 中，但是当我使用开发人员工具时，我能够找到被替换的元素，但在我关闭开发人员工具之前它不会显示。一旦我打开和关闭开发人员工具，在我刷新页面之前，问题就不再可复制。

只有在我尝试替换元素的 outerHTML 时才会发生这种情况。

我第一次尝试使用 jquery's replaceWith api，这很有帮助，所以我切换到以下脚本 -

function chromeOuterHTML(oldElem, outerhtml)
{
var el = document.createElement('div');
el.innerHTML = outerhtml;
var parentNode = oldElem.parentNode;
var range = document.createRange();
        range.selectNodeContents(el);
        var documentFragment = range.extractContents();
        parentNode.insertBefore(documentFragment, oldElem);
        parentNode.removeChild(oldElem);
}

我不认为这是我的 javascript 的问题，因为问题是特定于 chrome 的，并且仅在某些情况下才会发生。

任何帮助将不胜感激

【问题讨论】：

如果您可以发布指向示例页面的链接，您肯定会更快地获得解决方案！
其他一些想法：范围是有趣的野兽——它们可以跨越起点和终点之间的多个元素，因此它们不一定会干净地选择 DOM 节点。这不应该在你的情况下是一个问题，但你永远不知道。
在处理具有多个顶级节点的 documentFragments 时，我也看到了奇怪的行为。我不记得具体细节，但我发现当片段包含在单个顶级节点中时，它们的表现要好得多。
问题是我无法在示例页面中复制该问题。甚至尝试保存现有页面以复制问题，但我无法做到。
我也试过 jquery 的 replaceWith api，也有帮助。在我的情况下，我替换的所有元素都直接在 body 标记下。我还看到这个问题主要发生在弹出窗口中，但并不总是发生在弹出窗口中

标签： javascript google-chrome outerhtml

【解决方案1】：

更多的是诊断工具而不是解决方案，但您是否尝试过延迟 insertBefore？

function chromeOuterHTML(oldElem, outerhtml)
{
var el = document.createElement('div');
el.innerHTML = outerhtml;
var parentNode = oldElem.parentNode;
var range = document.createRange();
        range.selectNodeContents(el);
        var documentFragment = range.extractContents();
            setTimeout(function () {    
                parentNode.insertBefore(documentFragment, oldElem);
                parentNode.removeChild(oldElem);
    }, 1);
}

在某些情况下（我不完全理解），如果 DOM 操作连续发生得太快，可能会失败。此修改将延迟（仅 1 毫秒）插入 - 它可能会有所作为。也有可能什么都不做！

【讨论】：