javascript - Jquery append 两个具有不同类的html页面

Question

嗨，我对 jquery 的 .append() 和 .html() 函数感到困惑。

我在 AJAX 中取得了成功:

success: function(response){

$('#imodal').html('Success!').addClass("flash-success").fadeIn();

$('#imodal').append(response);

}

这基本上会显示一种带有“flash-success”类的绿色背景中的闪光消息，以及包含必要信息的来自 JSON 编码的响应关于刚刚发生的交易。

我的问题是，类“flash-success”也出现在 append 响应中。我如何使这两个类不同？我试过这个:

$('#imodal').html('Success!').addClass("flash-success").fadeIn();

$('#imodal').append(response).removeClass("flash-success");

但没有运气。 append 的响应仍然是绿色的，可能具有“flash-success”类。感谢您的帮助!

Answer 1

jQuery append() 将在容器末尾插入内容/元素，而不替换其内容。 http://api.jquery.com/append/

其中，jQuery html() 将使用给定数据和 html 格式覆盖容器内的内容 http://api.jquery.com/html/

My problem is, the class "flash-success" is also present in the appended response

因为您要向 append 本身添加类 html('Success!').addClass("flash-success")

尝试:

$('#imodal').append(response); // Append the child to element
$('#imodal').addClass("flash-success"); // add class to container