Question

尝试在程序中发生成功事件时显示p元素。但是我只能让p元素出现，但不能让文本显示在元素中，这我要去哪里错了？

$('.success-msg').show().append('<strong>Success:</strong> Your review has been created');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="success-msg"></p>

以上代码仅将p元素显示为空，如何显示文本？

Answer 1

使用此

$('.success-msg').html('<strong>Success:</strong> Your review has been created').show();

Answer 2

使用$ .when（）语句解决返回的Promise

var show=function(){
    return $('.success-msg').show();
}
$.when(show()).done(function(){
    $('.success-msg').append('<strong>Success:</strong> Your review has been created');
});

另一种解决方法是

$('.success-msg').show(function(){
    $(this).append('<strong>Success:</strong> Your review has been created')
});

另一种解决方法是

$('.success-msg').html('<strong>Success:</strong> Your review has been created').show();

您的主要错误是您将脚本标记放在首位，因此在加载函数时该类没有p，因此您必须将脚本标记放在正文末尾或将代码封装在$（文档）。ready（）

Answer 3

您的代码是正确的，因此我不建议新的方法。

但是，请将您的代码包装在document.ready中。 p元素可能始终可见，而显示不是因为您的代码。以下代码完整且可测试，没有任何更改：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <p class="success-msg"></p>
 <script>
     $(function() {
        $('.success-msg').show().append/*or .html(..) or .append($("<strong ..."))*/('<strong>Success:</strong> Your review has been created');
      });
</script>

检查您包装的代码online

使用jQuery显示文本并将其添加到p元素

3 个答案: