Question

说我有一个div，像这样：

<div id = "foo" style = "display: grid">
    <div id = "bar"> keep me! </div>
</div>

并像这样使用JQuery'.html(data)：

$('#foo').html(data);

使用AJAX调用并检索数据，它将覆盖#bar。我该如何预防？再次调用AJAX之后，我想保留#bar而不保留上一个AJAX调用中已插入的其他元素。

Answer 1

好吧，您应该将bar存储到变量中，调用ajax，然后在data后面附加bar

var bar = $('#bar')[0].outerHTML;
// Call ajax
// In Response do the following
data += bar; // added bar after response
// OR
data = bar + data; // added bar before response
// Then write to your div
$('#foo').html(data);
// Or
$('#foo').empty().append(data);

Answer 2

将您的代码更改为以下代码：

<div id = "foo" style = "display: grid">
    <div id = "bar"> keep me! </div>
    <div id="nothing"></div>
</div>

然后使用prepend方法在没有ID之前插入新内容。

$('#nothing').prepend(data);

Answer 3

您可以使用after添加一个平移元素-$('#bar').after(data); 您可以阅读有关after和insertAfter here

的更多信息

如何在.html（data）之后保留某些div

3 个答案: