Question

I’m using jQuery to manipulate DOM in my project. I’ve got class method, that works like this:

<!-- language: lang-js -->    
var template = this._Template.split('{0}');
    var content = template[0] + this._Content + template[1];
    if (!this._BlockNode) {
        this._BlockNode = $(content);
        this._ParentNode.append(this._BlockNode);
    }
    else {
        this._BlockNode.replaceWith(content);
    }

Everything is ok on the first call of this method, because it creates node and appends it to parent node. The second call (using replaceWith() method) works ok too. But after it property this._BlockNode[0].parentNode is null. So when I call it third time and replaceWith() works with new _.BlockNode without .parentNode property it does not replace content of node because of this check: if ( !isDisconnected( this[0] ) ) { //line 5910 in jQuery 1.8.3.
How to deal with it?

Answer 1

You need to ensure that _BlockNode always points to the current version of the content.

When you call replaceWith you correctly update the DOM structure, but fail to update the contents of your object. The original _BlockNode ends up orphaned, and all subsequent replaceWith calls work on that node and not on the newer content.

Try this:

var template = this._Template.split('{0}');
var $content = $(template[0] + this._Content + template[1]);
if (!this._BlockNode) {
    this._ParentNode.append($content);
} else {
    this._BlockNode.replaceWith($content);
}
this._BlockNode = $content;

It may be preferable to hold a native DOM element in _BlockNode rather than a jQuery object.