Javascript jqueryappend元素自身重复

我的警报框出现在每一次CRUD操作中

<section class="content container-fluid">
        <div id="notif-box" style="display: none;" class="alert alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4 id="head-title"><i id="icon-box" class="icon fa"></i></h4>
            <span id="alert-message"></span>
        </div>
    </section>

还有这个功能：

function displayNotif(type, icon, text, alertTitle) {

   $("#notif-box").removeClass();
   $("#icon-box").removeClass();
   $("#head-title").removeClass(alertTitle);
   $("#notif-box").show();
   var notifBoxClass = "alert alert-"+type+" alert-dismissible";
   var iconClass = "icon fa fa-"+icon;
   $("#notif-box").addClass(notifBoxClass);
   $("#icon-box").addClass(iconClass);

  // this is the issue
  $("#head-title").append(alertTitle);

  $("#alert-message").html(text);
   setTimeout(function () {
    $("#notif-box").fadeOut();
}, 5000);

}

当我第一次按下“添加”按钮时，标题是“成功！” 当第二次击中头部时，标题是“成功！成功！ 三是"成功!！成功！成功

---

其他元素按预期工作！不知道问题出在哪里

与其一次又一次地追加，不如简单地替换文本来解决问题

改变

$("#head-title").append(alertTitle);

到

---

是的，谢谢。问题是，当我像那样更改时，图标会丢失。我不知道为什么会在这种情况下消失@马蒙

$("#head-title").append(alertTitle);

$("#head-title").html(alertTitle);