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

Question

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/

I would suggest just doing the following $titleElm.html("<input type='text' value='tom'>"); — ChristopherW
– ChristopherW, Commented Jul 2, 2016 at 19:25

BenM · Accepted Answer · 2016-07-02 19:14:31Z

2

Add find('input') after you update the HTML:

$titleElm.html("<input type='text'>").find('input').val('tom');

jsFiddle Demo

answered Jul 2, 2016 at 19:14

BenM

53.3k26 gold badges116 silver badges172 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Over a year ago

Thanks! The way I was thinking was: .html() returns a jquery object so why not chain .val() right after. Do you know why it did not work as I had in mind?

BenM Over a year ago

Because html() here is returning the jQuery object of $titleElm which isn't an input. html() does not return a jQuery object of the specified HTML, but of the outer container itself.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related