javascript - 将 2 创建的元素连接到 html 属性中

Question

如何将 jquery 中的 2 个动态创建的 HTML 元素(var foo + bar)连接到 html 属性中？ 预期结果:<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>

但我得到:<div class="form-control" data-trigger="fileinput">[object Object][object Object]</div>

var foo = $('<i></i>', {
    'class': 'glyphicon glyphicon-file fileinput-exists'
});
var bar = $('<span></span>', {
    'class': 'fileinput-filename'
});
var formControl = $('<div></div>', {
    'class': 'form-control',
    'data-trigger': 'fileinput',
    'html': foo + bar
});

Answer 1

您需要获取foo和bar的外部HTML

var foo = $('<i>123</i>', {
    'class': 'glyphicon glyphicon-file fileinput-exists'
});

var bar = $('<span>456</span>', {
    'class': 'fileinput-filename'
});
var formControl = $('<div></div>', {
    'class': 'form-control',
    'data-trigger': 'fileinput',
    'html': foo[0].outerHTML + bar[0].outerHTML
});

outerHTML browser compatability

工作 Fiddle