.append（）为不同的参数类型产生不同的结果

我正在使用JQuery和Jquery UI创建一个包含自定义窗体的对话框。我有一个基本的对话框，它有一个附加到它的主体的工具。所以我的对话框的基本结构是JQuery UI框架>对话框> ToolBody>工具内容。.append（）为不同的参数类型产生不同的结果

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(); 
};

这工作，尽管它需要重构，但是使用这种方法，我尝试使用注释掉前行：

$toolBody.append($tool);

这种方法肆虐在我的布局混乱，造成附加的内容被阻止接收焦点。任何人都可以解释追加Jquery对象和附加一个html字符串之间的区别吗？或者为什么它以这种方式表现？

来源

2011-08-10 Kevin Bowersox

这行代码：

$toolBody.append($tool);

将获取$ tool中的节点，并将移动到它们到$ toolBody的第一个（希望是唯一的）节点。

这行代码：

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

打开所有的HTML代码的$工具的内部，把它变成一个字符串。 jQuery Append方法在它周围有糖，并且足够聪明地认识到，当您尝试append()字符串时，它应该首先将该字符串转换为一组节点。

实际上，您正在移动前者和案例中的节点，并在后一种情况下对$ tool中的节点执行（较差）克隆。

来源

2011-08-10 10:15:31

感谢解释非常有用的信息。你为什么说它是一个可怜的克隆，我会注意到接收方法绑定？ –

没问题。这就是我们来这里的原因，对吧？：） –

AFAIK，对象是对DOM元素的引用，而不是该元素的副本。

所以，你可以使用html（）来显示它的所有html内容，或text（）来显示它的所有文本内容，并删除标签。

你可能会更好使用的clone（），这使得精确的复制，并且可以结合appendTo（）使用

喜欢的东西：$(tool).clone().appendTo().toolBody

来源

2011-08-10 10:09:42 daveyfaherty

.append（）为不同的参数类型产生不同的结果

回答

相关问题