javascript - jQuery prepend()无法正常工作，怎么了

我很困惑我的append（）没有显示在HTML中。你们能告诉我以下代码有什么问题吗：

<div class="form-group" id="password">
     <label class="control-label" for="inputError"> Password:</label>
     <input type="password" class="form-control" id="input-password" placeholder="Password" value="" name="password"/>
</div>

我的js：

<script type="text/javascript">
        $('input[name="password"]').focusout(function() {
            if($(this).val()==""){
                $('#password').attr('class','form-group has-error');
                $('#password .control-label').prepend("<span class='fa fa-times-circle-o'></span>");
                $('#password .control-label').text(' Input your new password!');
            }
        });
</script>

最佳答案

假设触发了聚焦事件，问题是您在.prepend（）之后使用.text（），这将删除通过.prepend（）添加的内容

$('input[name="password"]').focusout(function () {
    if ($(this).val() == "") {
        $('#password').attr('class', 'form-group has-error');
        $('#password .control-label').text(' Input your new password!');
        $('#password .control-label').prepend("<span class='fa fa-times-circle-o'></span>");
    }
});

演示：Fiddle



所以

jQuery(function($){
    $('input[name="password"]').focusout(function () {
        if ($(this).val() == "") {
            $('#password').attr('class', 'form-group has-error');
            $('#password .control-label').text(' Input your new password!').prepend("<span class='fa fa-times-circle-o'></span>");
            //$('#password .control-label').html('<span class="fa fa-times-circle-o"></span> Input your new password!');
        }
    });
});