jQuery replaceWith不適用於谷歌瀏覽器

Question

我在使用Google Chrome瀏覽器中的javascript動態替換控件時遇到一個奇怪的問題。 被替換的控件不會顯示在UI中，但是當我使用開發人員工具時，我能夠找到被替換的元素，但是直到我關閉開發人員工具時，它才顯示出來。 一旦我打開和關閉開發人員工具，在刷新頁面之前，該問題將不再可復制。

僅在我要替換元素的externalHTML的情況下才會發生這種情況。

我首先嘗試使用jquery's replaceWith api，這對dint有幫助，所以我切換到以下腳本-

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，並且僅在某些情況下才會發生。

任何幫助將不勝感激

Answer 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操作連續進行得太快，則可能會失敗。 此修改將延遲插入（僅延遲1ms）-可能會有所作為。 也有可能什么都不做！