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

我用JQuery创建一个动态按钮，当我浏览网页的源代码时，我看到的仍然是JQuery代码，比如$("<input>", { "id": "myid", "type"... 我希望看到生成的按钮代码如<input id="Button1" type="button" value="button" /> 我该怎么办？如何从动态插入的元素中获取生成的HTML？

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

来源

2012-02-02 HelloCW

如果您使用像Firebug这样的工具，它应该显示在DOM中。 – 2012-02-02 01:57:30

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

来源

2012-02-02 01:54:18

如果你只是想生成的元素的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看起来absoluely没有像原来的源代码。

但是，如果你想看到整个DOM的当前状态的重新序列表示，看串，你从这里得到：

document.documentElement.outerHTML

永远不要这样做。 Seriously.

来源

2012-02-02 01:58:07 josh3736

谢谢！但是我无法在http://jsfiddle.net/josh3736/pVXaj/找到它的源代码，并且Firebug can做到这一点。 – HelloCW 2012-02-02 02:10:24

@ user828896：查看答案的更新。 – josh3736 2012-02-02 02:33:10

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

回答

相关问题