No flicker update web content JS implementation

  • 2020-03-30 01:00:43
  • OfStack

Todo list

Scintillation - free updating of web pages is a larger topic.

The loaded HTML string (retrieved via ajax), if you still need to run the code, is a problem.

The ultimate solution


var str2DOMElement = function(html) {
    var frame = document.createElement('iframe');
    frame.style.display = 'none';
    document.body.appendChild(frame);
    frame.contentDocument.open();
    frame.contentDocument.write(html);
    frame.contentDocument.close();
    var el = frame.contentDocument.body.firstChild;
    document.body.removeChild(frame);
    return el;
    }
    var markup = '<div><p>text here</p></div>';
    var el = str2DOMElement(markup);


Related articles: