Question

我需要获取整个页面的HTML，并使用value="..."中所有输入的当前值。

我试过这个：

document.getElementById("htmlId").innerHTML;

和此：

$('html').html();

但两者都返回HTML页面但没有输入值。

_{我知道这看起来像this other question，但它不一样。我真的需要使用值属性获取HTML 。}

Answer 1

输入具有value attribute，用于确定输入的初始值。它还有一个value property，用于保存输入的当前值。

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

您可以按照以下方式执行此操作：

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

Answer 2

对于html内部的输入值使用此代码可能会得到一些帮助

   <input type="number"
                           name="content"
                           md-auto-focus


                           ng-model="vm.model.content"
                           ng-required="{{vm.required === null ? true : vm.required}}"
                           ng-attr-ng-max="{{vm.max}}"
                           ng-attr-ng-min="{{vm.min}}">    <div ng-message-exp="['required','min']" ng-if="vm.min != null">
                            <span data-translate
                                  translate-value-length="{{vm.min}}">min</span>
                            </div>
                            <div ng-message="required" ng-if="vm.min == null">
                                <span data-translate>required</span>
                            </div>
                            <div ng-message="number">
                                <span data-translate>numberOnly</span>
                            </div>
                            <div ng-message="max">
                            <span data-translate
                                  translate-value-length="{{vm.max}}">max</span>
                            </div>

                    </div>

Answer 3

假设“ html ”本身是元素的id，您可以尝试cloneNode。

var clonedElem = document.getElementById("html").cloneNode(true);

此clonedElem是一个DOM对象，它包含html和值（以及所有其他属性）。您现在可以将此DOM用于所有目的。

对于Eg。如果你想将它插入另一个元素，你可以这样做

document.getElementById('newElement').appendChild(clonedElem)

这将使整个节点的值为

Answer 4

如前评论，

.html()或innerHTML将返回标记。 value是与输入元素相关联的属性。是的，你有一个标签，但最终你终止了你启动这个属性。因此，当您动态更改值时，它会更新属性而不是属性

您必须遍历所有输入并设置value属性。

function updateAttribute() {
  var parent = document.querySelector(".content");
  var inputs = parent.querySelectorAll("input");

  for (var i = 0; i < inputs.length; i++) {
    inputs[i].setAttribute("value", inputs[i].value);
  }
}

Working Demo

Answer 5

如果您想获取输入值，我将使用.attr来动态更改元素值！

$("ButtonToCatchInputValue").click(function(){
        $("input").each(function(){
            $(this).attr("value",this.value);
        });
        console.log($("html").html());  
    });

Answer 6

使用document.cloneNode克隆整个文档保留 html的状态。

cloneNode有一个布尔参数，表示以下

true - 克隆节点及其属性及其后代

false - 默认。仅克隆节点及其属性

有关详细信息，请查看此document

function cloneMe() {
  var newelement = document.cloneNode(true);
  console.log(newelement.getElementsByTagName("input")[0].value)
}

<input type="text" value="Change My Value" style="width:100%" />
<input type="submit" onclick="cloneMe()" value="Clone Now" />

获取具有当前输入值的HTML

6 个答案: