Question

I am experiencing different results from the two following bits of code. I thought, though, that they should perform identically. Could anyone enlighten me on the differences and when I should use one over the other?

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" />');
}

I would prefer to use jQuery’s DOM object constructor since it neatly encapsulates properties, but apparently I do not fully understand it.

EDIT: I am working on generating a jsFiddle for this question. Please check back.

Answer 1

I believe I tracked down the answer. Unfortunately, it’s nothing sexy or educational.

When I create my ContentHeader object I return some public methods. One of which is called ‘SetTitle.’ It looks like so:

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

This method is interacted with during an asynchronous code-execution block which reaches out to a server. It seems that the overhead of creating a jQuery object was generating different, awkward results based on timing. The issue was not reproduceable inside of a jsFiddle.