如何将 html 和值输出到字符串答案

【问题标题】：how do you get the html and value output to a string如何将 html 和值输出到字符串
【发布时间】：2011-11-11 16:21:45
【问题描述】：

给定这个 html 输入元素，

如果用户输入 'test' 的值，jQuery 中有没有办法将其序列化为字符串？

我要寻找的输出是

我没有将它复制到 DOM 中的另一个元素，我需要实际的字符串，以便将其发送到 EVOPdf。我已经尝试过克隆（true），但它没有给我用户输入的任何值。

除非有人知道更好的方法，否则我不得不解析 html() 字符串并为每个输入插入一个值。

【问题讨论】：

您的意思是要查找的输出是<input id="input1" type="text" value="test" /> 还是只是test？
stackoverflow.com/questions/2419749/…可能重复
我要查找的输出需要是 '',
它不是重复的，outerHTML 仍然没有最终用户输入的值

标签： javascript jquery

【解决方案1】：

我的测试发现 attribute 值与 value 值无关 - 至少在我使用 Safari 5.1 和 FF 6 进行的测试中。

所以，如果我修改了文本字段的内容（我输入了 ueoau）并选择它

> var text = $('input[type=text]').first()

并使用.val()获取其值

> text.val()
"ueoau"

但是获取它的标记会使值呈现为空（来自詹姆斯的答案的这个 sn-p）

> $('<div>').append(text.clone()).remove().html()
"<input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="" style="width: 200px; max-width: 200px; ">"

获取 attribute 值也不起作用（在此处使用 DOM getAttribute 以避免 jQuery 在 attr() 中的魔力）

> text[0].getAttribute('value')
""

同样，attribute 值与 value 值不同。因此，您可以使用的一种解决方法是将其属性 设置为 其值

> text[0].setAttribute('value', text.val())
> $('<div>').append(text.clone()).remove().html()
"<input autocomplete="off" name="q" class="textbox" placeholder="search" tabindex="1" type="text" maxlength="140" size="28" value="ueoau" style="width: 200px; max-width: 200px; ">"

这对我有用。我想我对此的解释是 attribute 值仅代表该字段的初始值，之后不会与其真实值同步。

【讨论】：

仅firebug（不知道如何在 Safari 中调用此实用程序）返回具有所有属性的 html（如在您的代码中）但在实际代码中 - 它会返回没有属性的 html t 指向 html 标记
我花了一段时间，但我得到了这个工作。下面是我在需要时使用 cmets 的代码。
我会再试一次，这是我的代码 var tempobj = $(getSelectedTab()).clone(); var inputarr = tempobj.find('input[type=text]').get(); $.each(inputarr, function (i) { var iid = $(inputarr[i]).attr('id'); var v = $(inputarr[i]).val(); tempobj.find('# '+iid).attr('值', v); }); var s = tempobj.html();
不适用于 textareas、selects 等，以及 $(x).val('...') 自动处理的所有其他元素。 =\

【解决方案2】：

jQuery 具有返回输入值的.val() 方法：

var value = $("#input1").val();

对于元素本身的html（包括value），尝试在新元素中封装一个clone，获取html，然后删除：

var html = $('<div>').append($('#input1').clone()).remove().html();

【讨论】：

我知道，我需要的是这个：

【解决方案3】：

怎么样；

var fragment = $("#input1").attr("value", "test").get(0).outerHTML;

注意不像 .html() 这将返回解释标记；例如，IE 会将节点名称大写并去掉引号

【讨论】：

该输出中的标记也没有给出文本字段中的当前值。
这实际上不起作用...我无法让它返回除undefined之外的任何内容。
哇，jquery 把我宠坏了，我忘记了 outerHTML 在 Firefox 中是一个禁忌，我只检查了 chrome+IE

【解决方案4】：

需要使用outerHTML() http://darlesson.com/jquery/outerhtml/

【讨论】：

这绝对不能解决问题。问题不是缺少元素，而是缺少属性。

【解决方案5】：

更新：

HTML：

<input id="test" type="text">
<input type="button" id="foo" value="press me">

jQuery:

// fullHTML plugin-function

$.fn.fullHTML = function(){
    var $this = $(this);
    return $('<div>')  
                   .append($this.clone())
                   .remove()
                   .html()
                   .replace('<input ','<input value="'+ $this.val() +'" ');
};

$(function(){    
    $("#foo").click(function(){
        alert ( $("#test").fullHTML() );
    });
});

工作示例： http://jsfiddle.net/n6Phu/

P.S. 此代码仅适用于输入，它仅捕获用户指向的 value 属性。其他属性不会显示。

【讨论】：