需要.inner
HTML功能,但使用当前表单字段值包括输入,选择(选定选项)和textarea.
所以,给定：
<form id=f>
<input type=text name=x />
<select name=y>
<option value='1'>one</option>
<option value='2'>two</option>
</select>
</form>
如果用户输入123,并选择选项2,则正常的f.innerHTML返回：
<input type=text name=x /> <select name=y> <option value='1'>one</option> <option value='2'>two</option> </select>
我希望f.magicInnerHTML返回：
<input type=text name=x value='123' /> <select name=y> <option value='1'>one</option> <option value='2' selected>two</option> </select>
反映当前的形式值.
解决方法
我想这就是你要找的东西：
JSFiddle link
JSFiddle link
在此示例中,使用所有已更改的属性及其值警告表单的“magic”innerHTML.我使用了jquery getAttributes plugin.这是代码,而不是插件代码：
function magicHTMLloop($el,s,notfirst){
if (notfirst) {
s += '<' + $el.get(0).tagName.toLowerCase();
var attrs = $.getAttributes($el);
for (var i in attrs){
s += ' ' + i + '="' + $el.attr(i) + '"';
}
s += '>';
}
$el.children().each(function(){
s += magicHTMLloop($(this),'',true);
});
if ($el.children().length && notfirst){
s += '</' + $el.get(0).tagName + '>';
}
return s;
}
function magicHTML($el) {
return magicHTMLloop($el,false);
}
// This is the example usage:
$('input').change(function(){
var v = magicHTML($('form'));
alert(v);
});
这有一些您可能想要考虑的边缘情况,例如值中的引号(这将导致无效的HTML) – 但我确信您可以自己逃避,如果有必要的话.如您所见,magicHTML函数的输出是更新的innerHTML：
<input type="text" name="x" value="this is the changed value">
