.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（）爲不同的參數類型產生不同的結果

回答

相關問題