javascript - 这两种使用 jQuery 附加 DOM 元素的方法有什么不同？

Question

我从以下两段代码中遇到了不同的结果。不过，我认为它们的性能应该相同。任何人都可以告诉我这些差异以及我何时应该使用其中的一个吗？

function ContentHeader(selector){
    "use strict";
    var contentHeader = $(selector);

    var headerTitle = $('<span/>', {
        'class': 'headerTitle'
    }).appendTo(contentHeader);

    //OPTION A: This is my preferred method, but, after calling appendTo, no DOM element is added to the DOM tree.
    var headerTitleInput = $('<input/>', {
        'class': 'headerInput',
        type: 'text'
    }).appendTo(headerTitle);

    //OPTION B: By contrast, this method is less robust / just a string, but the DOM element is added correctly to the DOM tree.
    headerTitle.append('<input type="text" class="headerInput" />');
}

我更喜欢使用 jQuery 的 DOM 对象构造函数，因为它巧妙地封装了属性，但显然我并不完全理解它。

编辑：我正在为这个问题生成一个 jsFiddle。请回来查看。

Answer 1

我相信我找到了答案。不幸的是，这不是性感或教育。

当我创建我的 ContentHeader 对象时，我会返回一些公共方法。其中之一称为“SetTitle”。它看起来像这样：

setTitle: function(title){
  headerTitle.text(title);
}

此方法在异步代码执行块期间与服务器交互。似乎创建 jQuery 对象的开销会根据时间产生不同的、尴尬的结果。该问题在 jsFiddle 内无法重现。