如何获取输入标记的html内容

How to get html content of a input tag?

本文关键字：html 内容 输入 何获取 获取      更新时间：2023-09-26

我有一个输入标签：

<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">

我需要获得输入标签中的所有内容（上面显示的所有内容），但当我使用时

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

它什么也不回。如何获取此内容？

试试这个：

document.getElementById('to_time_24_date').outerHTML;

使用这个简单的方法来获得所有的输入字段HTML:

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

我为您制作了JsFiddle测试演示，请点击此链接。它会给你同样的东西，你正在寻找，在警惕。

http://jsfiddle.net/jpaYK/

您可以尝试outerHTML属性。

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

您可以使用outerHTML

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

演示：Fiddle

没有jQuery

document.getElementById('to_time_24_date').outerHTML

html()获取内部HTML，即该元素内部元素的HTML。

请在此处查看答案：

获取所选元素'；s外部HTML

公认的答案在回答这个问题时使用了一个很好的技巧。它创建另一个元素（但不将其添加到页面中），在创建的元素中克隆它想要的元素，然后获得创建的元素的内部HTML，这就是克隆的HTML，这与我们想要的元素的HTML相同。

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

然而，看看其他答案，你也可以尝试一种更简单的方法，有一个属性outerHTML可以用作：

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

它具有良好的浏览器支持，如：
https://developer.mozilla.org/en-US/docs/Web/API/element.outerHTML?redirectlocale=en-美国&redirectslug=DOM%2Element.outerHTML

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

jsfiddle

<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">

它没有任何"Content"或"HTML"，它有属性，您可以从jQuery中使用attr方法获取属性$（'input[type="text"]'）.attr（'id'）；将返回id属性。

如果您只是在查找输入标记的输入值（键入的内容），则使用$（'input[type="text"]'）.val（）；以获取值。

我希望这能帮助

这是一个jsfiddle示例

http://jsfiddle.net/LUep8/

相关文章：