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 对象时，我返回了一些公共(public)方法。其中之一称为“SetTitle”。看起来像这样:

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

此方法在到达服务器的异步代码执行 block 期间进行交互。看起来创建 jQuery 对象的开销会根据时间生成不同的、尴尬的结果。该问题无法在 jsFiddle 中重现。