使用当前输入值获取HTML [英] Get HTML with current input values

问题描述

我需要获取整个页面的HTML，并将所有输入的当前值保存在它们的value="..."中.

I need to get the HTML of the whole page, with the current values of all inputs in their value="...".

我已经尝试过了:

document.getElementById("htmlId").innerHTML;

和这个:

$('html').html();

但是两者都返回HTML页面，但没有输入值.

but the both return the HTML page but without the input values.

_{我知道这看起来像这个其他问题，但是不一样.我真的需要获取具有值属性的HTML .}

_{I know that this looks like this other question, but it is not the same. I really need get the HTML with the value attributes.}

推荐答案

输入具有 value属性，其中包含输入的当前值.

An input has a value attribute that determines the initial value of the input. It also has a value property that holds the current value of the input.

您似乎要导出页面的HTML标记，其中所有输入的value属性都设置为value属性的值.

It appears that you want to export the HTML markup of the page, where the value attributes of all inputs are set to the value of the value property.

您可以按照以下步骤进行操作:

You can do so as follows:

// first, set `value` attribute to value of property for all inputs
$('input').attr('value', function() {
  return $(this).val();
});
// export HTML with correct `value` attributes
$('html').html();

这是一个实际的演示.

$('#export').on('click', () => {
  $('input').attr('value', function() {
    return $(this).val();
  });
  console.log($('html').html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Some paragraph.</p>
<input type="text" value="initial value" />
<h1>Header</h1>
<p>Another paragraph</p>
<button id="export">Export page</button>

这篇关于使用当前输入值获取HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！