jQuery: Wrap outputted text in span?

Question

I have a jQuery script that inserts an <input> after the outputted text. My question is how do I wrap the outputted text in a <span> before the <input> is called?

$(".todo-deadline").each(function() {
    $(this).html($(this).text() + "<input readonly='readonly' class='hasDatepicke2' type='text' value='"+$(this).text()+"' />");
});

Answer 1

Try

$(".todo-deadline").each(function() {
    var $this = $(this), text = $this.text();
    $this.empty().append($('<span />', {
        text: text
    })).append('<input readonly="readonly" class="hasDatepicke2" type="text" value="' + text + '" />')
});

Demo: Fiddle

Or

$(".todo-deadline").html(function(idx, html) {
    return '<span>' + html + '</span>' + '<input readonly="readonly" class="hasDatepicke2" type="text" value="' + html + '" />'
});

Demo: Fiddle