How to get html content of a input tag?

Question

I have an input tag:

<input type="text" value="04/09/2013" class="date-time-date width-100 hasDatepicker" name="booking_info[to_time_24_date]" id="to_time_24_date" readonly="readonly">

i need to get all the content in input tag (all content shown above) but when i use

$('#to_time_24_date').html();

it returns nothing. How can i get this content?

do you want to get the value of the input tag..?? then use `$('#to_time_24_date').val();` — Dipesh Parmar, Sep 04 '13 at 03:34
if you want to get the values of attributes like class, id , type etc use $('#to_time_24_date').attr('name') etc. — Taimur Khan, Sep 04 '13 at 03:49

score 2 · Answer 1 · answered Sep 04 '13 at 03:28

2

Try this:

document.getElementById('to_time_24_date').outerHTML;

answered Sep 04 '13 at 03:28

Tom

4,422
3
24
36

Hassan Sardar · Answer 2 · 2013-09-04T04:00:31.597

2

Use this simple method in order to get all of your input field HTML:

$('#to_time_24_date').get(0).outerHTML;

I have made a JsFiddle Test Demo for you, Please follow this link. It will give the same thing you are looking for, in alert.

http://jsfiddle.net/jpaYK/

edited Sep 04 '13 at 04:00

answered Sep 04 '13 at 03:54

Hassan Sardar

4,413
17
56
92

score 1 · Answer 3 · answered Sep 04 '13 at 03:25

1

You may try the outerHTML property.

$('#to_time_24_date').get(0).outerHTML

answered Sep 04 '13 at 03:25

xdazz

158,678
38
247
274

score 0 · Answer 4 · answered Sep 04 '13 at 03:24

0

you can use outerHTML

$('#to_time_24_date').get(0).outerHTML; // $('#to_time_24_date')[0].outerHTML;

Demo: Fiddle

without jQuery

document.getElementById('to_time_24_date').outerHTML

answered Sep 04 '13 at 03:24

Arun P Johny

384,651
66
527
531

no he can't, outerHTML isn't a real HTML property and isn't supported by several browsers, unlike innerHTML. – Mike 'Pomax' Kamermans Sep 04 '13 at 03:25
@Mike'Pomax'Kamermans have a look at https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML#compat-desktop – Arun P Johny Sep 04 '13 at 03:26

score 0 · Answer 5 · edited May 23 '17 at 11:49

html() gets the inner HTML, HTML of the elements inside this element.

Check the answer here:

Get selected element's outer HTML

The accepted answer uses a nice trick in the answer to this question. It creates another element (but doesn't add it to the page), clones the element it wants inside the created element, and then gets the inner HTML of the created element, which is the HTML of the clone, which is the same HTML of the element we want.

$("<div>").append($('#to_time_24_date').eq(0).clone()).html();
// or
$("<div>").append(document.getElementById('#to_time_24_date').clone()).html();

However, see other answers as well, turns out there is a simpler way you can try too, there's a property outerHTML you can use as:

$('#to_time_24_date')[0].outerHTML

Which has decent browser support as per:
https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML?redirectlocale=en-US&redirectslug=DOM%2Felement.outerHTML

score 0 · Answer 6 · answered Sep 04 '13 at 03:51

0

var html = "<input";
$.each($("#"+to_time_24_date)[0].attributes, function(i, attr){
    html += ' '+attr.name+'="'+attr.value+'"';
});
html += " />";
alert(html);

jsfiddle

answered Sep 04 '13 at 03:51

gp.

8,074
3
38
39

Robert · Answer 7 · 2013-09-04T04:20:49.447

<input type="text" value="04/09/2013" class="date-time-date width-100 hasDatepicker" name="booking_info[to_time_24_date]" id="to_time_24_date" readonly="readonly">

This does not have any "Content" or "HTML" it does have attributes, and you can get the attributes with the attr method from jQuery.. $('input[type="text"]').attr('id'); would return the id attribute.

If you are just looking for the entered value of the input tag (what is typed in) then use $('input[type="text"]').val(); to get the value.

I hope this helps

here's a jsfiddle example

http://jsfiddle.net/LUep8/

How to get html content of a input tag?

7 Answers7