jQuery append元素自身重复

Question

我有一个警报框，它出现在每个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>

我有问题#headtitle我写headText的地方。

在我的成功方法中，我称之为：

displayNotif('danger', 'check', 'User added successfully', 'Success!');

以及这个功能：

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);

}

当我第一次点击添加按钮时，标题是"成功！"当第二次被击中时，标题是"成功！成功！第三是成功！成功成功！'

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

Answer 1

不需要一次又一次地追加，只需替换文本就可以解决问题。

更改

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

至

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