jQuery setting input value attribute using .html() not working

I want to be able to set the contents of the value attribute in the input element but have not been successful doing this.

HTML:

<div class='photo-info'>
    Photo Name : <span class='photo-name'><?php echo $title; ?></span>
    <span class='title-edit'><a href='#'>Edit</a></span>
</div>

jQuery:

// show editable area for title
    $('.title-edit').on('click', function () {
        var $titleElm = $(this).prev();
        var text = $titleElm.text();
        $titleElm.html("<input type='text'>").val('tom');
    })

Result:

https://jsfiddle.net/fh7t9qwd/1/