我从以下两段代码中遇到了不同的结果。不过,我认为它们的性能应该相同。任何人都可以告诉我这些差异以及我何时应该使用其中的一个吗?
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。请回来查看。