使用jQuery append()添加html元素后的页面源问题

Issue with page source after Adding html elements using jQuery append()

本文关键字：问题 元素 html append jQuery 添加 使用      更新时间：2023-09-26

我是jQuery新手。我使用jQuery append()来添加HTML元素。在查看页面源后，元素没有显示，但它们已经添加并显示在网页中。

代码:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
    </head>
    <body>      
        <div id="button-div">
            <button id="test-btn">
                Click Me
            </button>
        </div>
        <script>
            $('#test-btn').click(function (){
                $('#button-div').append("<div>This is sample text</div>");
            });
        </script>
    </body>
</html>

实际上我想添加一些元素来添加html网页，并保存新添加的元素到数据库。

然后我使用Jquery来收集内容，结果显示为空。这才是真正的问题。

必须使用DOM检查器。查看页面源代码将只加载静态HTML，因为您的javascript执行添加了动态HTML，所以它不会以这种方式可见。

您的元素将不会出现在源代码中。如果使用元素检查器，就可以看到发生了什么。在windows上的Chrome中，您可以使用F12键或cmd+alt+i在mac osx上显示。

页面源代码只显示在页面加载时添加的html，页面加载后通过javascript或jquery添加的html可以使用Firebug Inspect或chrome inspector查看

相关文章：