Question

我使用JQuery创建动态按钮，当我浏览网页的源代码时，我看到的仍然是JQuery代码，例如$("<input>", { "id": "myid", "type"... 我希望看到生成的按钮代码，例如<input id="Button1" type="button" value="button" /> 我该怎么办？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("<input>", { "id": "myid", "type": "button", "value": "Confirm", "name": "comfire" }).appendTo("#tablemsgbox");
        $("#myid").click(function () {
            alert($(this).val());
        });
    });  
</script>
</head>  

<body>
    <input id="Button1" type="button" value="button" />
    <div id="tablemsgbox">
    </div>
</body>  
</html>

Answer 1

查看源代码显示服务器生成的原始页面，但不会显示通过javascript完成的任何DOM操作。如果您想在js操作后查看DOM的状态，请使用Firebug for Firefox，Chrome Inspector或IE开发人员工具等工具。

Answer 2

如果您只想要生成元素的HTML，则只需执行以下操作：

$('#myid')[0].outerHTML

Demo.结果因浏览器而异。

但是，如果您认为可以右键单击该页面，请单击“查看源”，然后查看插入的元素与源的其余部分，这不会发生。

HTML源代码是DOM的序列化表示。浏览器将HTML解析为代表DOM的内存数据结构，然后使用它。您对DOM后记（通过脚本）所做的任何操作都不会反映在“来源”中，因为这不是您的脚本所影响的内容。 Firebug（或任何其他开发工具）向您展示的是DOM的解析和当前状态。

也就是说，通过innerHTML / outerHTML，您可以要求浏览器将DOM重新序列化为HTML。但是，重新序列化的HTML不能保证与原始源相同 - 即使您从未使用脚本修改DOM - 因为在解析过程中事物可以并且将会转移;这是HTML宽恕标记宽恕的本质。

事实上 - 作为一个极端的例子 - 如果你足够愚蠢地将你的网页作为XML with an XSLT transform ¹提供服务，重新序列化的HTML将看起来像绝对没有像< / em>原始源代码。

但是，如果您想查看整个DOM当前状态的重新序列化表示，请查看从此处获得的字符串：

document.documentElement.outerHTML

¹永远不要这样做。 Seriously.

如何从动态插入的元素中获取生成的HTML？

2 个答案: