使用 JS 或 JQuery 获取渲染页面

Question

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
</head>
<body>
  <input id="test" value="">
  <input type="button" id="btn" value="Get">
</body>
</html>

和 JS:

$('#btn').click(function(){
  alert(document.documentElement.innerHTML);
});

http://jsbin.com/wuveresele/edit?html,js,output

我想在输入字段中输入一些值（例如 123），单击按钮并在弹出的警报窗口中查看 "rendered" html 页面代码。

我看到的：

...
<input id="test" value="">
...

我想看的：

...
<input id="test" value="123">
...

是否可以使用JS或JQuery？

Answer 1

这是我添加到您的 JS 中的内容

$('#btn').click(function(){
  $("#test").attr("value",$("#test").val());
  alert(document.documentElement.innerHTML);
});

我实际上做的是使用 Jquery attr() function。第一个参数是指您要操作的属性，第二个属性是要给出的值。

这是working demo

Answer 2

这是您的解决方案：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn").click(function(){
        var value = $("#test").val()
        alert(value);
    });
})
</script>
<input id="test" value="">
<input type="button" id="btn" value="Get">

使用 JS 或 JQuery 获取渲染页面

Get rendered page using JS or JQuery

html

javascript

jquery