Question

I’m trying to write a script that generates Twitter Bootstrap styled elements by simply passing through options to different functions. In this example, I’m generating a submit button.

jQuery seems to allow one element to be rendered, but nesting them like so fails.

Are ther any alternatives to this approach?

function renderButton(buttonText, buttonType, buttonName){
    if(buttonType == 'submit'){
        var $button = $('<input/>', {
            'type'  : 'submit',
            'name'  : buttonName,
            'value' : buttonText,
            'class' : 'btn submit'
        });
    }
    var $form_actions = $('<div/>', {
        'class' : 'form-actions',
        'text'  : $button
    });

    return $form_actions;   
};

renderButton('Go!', 'submit', 'buttonGo').insertAfter('#a');

Answer 1

By the time you’ve made it here:

var $form_actions = $('<div/>', {
    'class' : 'form-actions',
    'text'  : $button
});

return $form_actions;  

$button holds a jQuery element (not just a bunch of HTML). It won’t work to assign it directly as text, but you could append it like so:

var $form_actions = $('<div/>', {
    'class' : 'form-actions'
});

$form_actions.append($button);

return $form_actions;