Question

嗨我对jquery的 .append（）和 .html（）函数感到困惑。

我有这个AJAX成功：

success: function(response){

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

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

}

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

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

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

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

但没有运气。附加的响应仍然是绿色，可能有“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

因为您要将附加类添加到追加自身html('Success!').addClass("flash-success")

尝试：

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

Answer 2

jQuery .append（）方法将内容添加到元素的末尾。在您的情况下，“响应”将添加到ID为“imodal”的DOM元素。

如果你想在闪烁类之后添加，那么你应该将“响应”附加到闪烁类之后的另一个DOM元素。

Answer 3

$('#imodal').append(response).removeClass("flash-success"); 这不会从附加的响应中删除该类，它将在#imodal元素中查找不存在的类。如果您的回复是HTML代码，那么您应该执行以下操作：$(response).removeClass("flash-success");

Answer 4

只需在添加回复后添加“flash-success”类

$("#imodal").append(response)
$("#imodal").addClass("flash-success")

您可以获得所需的结果----

Jquery附加两个不同类的html页面

4 个答案: