无法看到动态添加的<ul>元素</ul>

Question

在我的rails应用程序中，

我正在进行ajax调用，并且从json响应我正在制作复选框树

ajax调用后，复选框在视图页面上显示正常，

但是当我尝试查看页面源时，浏览器在页面源代码中看不到动态添加的元素，我只能在添加动态内容之前看到源代码元素

任何人都可以告诉我，我做错了什么或是某些浏​​览器属性ro表现如此？

我的ajax响应函数添加动态元素

success: function(data) 
                    {
                        jQuery("#gradeContent").css("display","block");
                        var s=[]
                        jQuery("#gradeContent123").append('data');
                        jQuery("#gradeContent").append('<ul id="gradeContent_ul" class="ui-widget-daredevel-checkboxTree ui-widget ui-widget-content">')
                        jQuery.each(data, function(k,v) 
                        {
                            jQuery("#gradeContent").append('<li><input type="checkbox" name="category" id="category"/><span>'+k+'</span><ul>');

                            jQuery.each(v,function(k1,v1)
                            {
                                jQuery("#gradeContent").append('<li><input type="checkbox"/><span>'+v1+'</span></li>');
                            });


                            jQuery("#gradeContent").append('</ul></li><br/>');
                        });
                        jQuery("#gradeContent").append('</ul>');

                        jQuery('#gradeContent_ul').checkboxTree();

                    }

Answer 1

是的，它是浏览器的属性和自然行为。 “查看源代码”仅显示首次加载页面时来自服务器的初始html代码。

Answer 2

  

“动态添加的元素在浏览器的页面源代码中不可见”

这是正常和正确的行为。

要查看DOM的当前版本，包括任何动态添加/删除/更新，请使用浏览器的调试工具，您可以在Chrome或IE中使用F12打开，在FF中使用ctrl-shift-i打开，或者右键单击页面上的特定元素，然后选择“Inspect Element”（或浏览器的等效选项）。开发工具还可以让你看到适用于任何给定元素和事件处理程序等的CSS链。