用 jquery 前置 html 的一种方法有效，但为啥另一种方法无效？

Posted 2023-04-13

【中文标题】用 jquery 前置 html 的一种方法有效，但为啥另一种方法无效？

【英文标题】：One way of prepending html with jquery works but why the other way doesn't?用 jquery 前置 html 的一种方法有效，但为什么另一种方法无效？

【发布时间】：2012-01-11 11:00:04

【问题描述】：

这种前置方式对我有用：

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() 
            $("#learn-more-button").click(function() 
                $("#main-text").load('ajax/learn-more.html #learn-more', function() 
                                            $(this).prepend('<p> DARN </p>'); // <=== This here WORKS
                    $(this).hide().fadeIn(500); //Fade in
                    $("#main-text").animate( // Then Animate
                        width:"500px",
                        left:'+=400px',, 
                        400
                    );                                                                  
                );                 
            );
        );
    </script>

这种前置方式对我不起作用：

   <script type="text/javascript" charset="utf-8">
        $(document).ready(function() 
            $("#learn-more-button").click(function() 
                $("#main-text").prepend('<p> DARN </p>'); // <=== This here doesn't work
                $("#main-text").load('ajax/learn-more.html #learn-more', function() 
                    $(this).hide().fadeIn(500); //Fade in
                    $("#main-text").animate( // Then Animate
                        width:"500px",
                        left:'+=400px',, 
                        400
                    );                                                                  
                );                 
            );
        );
    </script>

为什么第二种方法不起作用？应该怎么做才能让它发挥作用？

我不是一个真正的 jQuery 人，所以非常感谢您的帮助 :)

【问题讨论】：

你能比“不起作用”更具体吗？它怎么行不通？你有错误吗？它是否在错误的位置添加了<p> 元素？另外，你能在问题中包含这个 jQuery 工作的 HTML 吗？

【参考方案1】：

当您执行load() 时，#main-text 元素的内容将被完全替换。因此，如果您在load 之前添加<p>DARN</p> - 就像在第二种方法中一样，它会被覆盖。

在第一种方法中，<p> 被添加到加载的回调函数中。这在加载完成后调用。

您还应该将方法链接到一个选择器以获得更好的性能，如下所示：

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() 
        $("#learn-more-button").click(function() 
            $("#main-text").load('ajax/learn-more.html #learn-more', function() 
                $(this).prepend('<p> DARN </p>')
                    .hide().fadeIn(500)
                    .animate(
                        width:"500px",
                        left:'+=400px'
                    , 400);
            );                 
        );
    );
</script>

【讨论】：

所以它正在被添加，然后被替换。