Question

I am using JQuery and Jquery UI to create a dialog box which contains a custom form. I have a basic dialog frame, which has a tool appended to its body. So the basic structure of my dialog is Jquery UI Frame > Dialog Frame > ToolBody > Tool Content.

Code: 

ToolManager.prototype.showTool = function(tool){
    var $container = $("#" + this.id);
    var $tool = $("#" + tool.id);
    var $toolBody = $("#" + this.toolBodyId);

    $container.dialog({
        resizable: false,
        modal: true,
        width: tool.width,
        stack: true,
        height: 'auto',
        draggable: true,
        close: this.tearDown,
        open: this.setup
    });

    $tool.removeClass("hidden");
    $toolBody.append($tool.html());
    //$toolBody.append($tool);
    $container.show();
};

This works despite its need for refactoring, however before using this method I was attempting to use the commented out line:

 $toolBody.append($tool);

This method wreaked havoc on my layout and caused the appended content to be blocked from receiving focus. Can anyone explain the difference between appending a Jquery Object and appending an html string? Or why it behaved this way?

Answer 1

This line of code:

$toolBody.append($tool);

Will take the nodes in $tool, and move them to the first (hopefully, the only) node of $toolBody.

This line of code:

$toolBody.append($tool.html());

Turns all of the HTML code inside of $tool and turns it into a string. The jQuery Append method has sugar around it and is smart enough to realize that when you’re attempting to append() a string, it should first turn that string into a set of nodes.

Effectively, you’re moving the nodes in the former and case and doing a (poor) clone of the nodes inside of $tool in the latter case.