Question

我有一个jquery函数加载一个php文件，它会将一些数据输出到div中。代码：

function add(){
    $("#div").load("add.php");
}

现在的问题是，我需要能够多次使用该功能而不会覆盖#div中的内容。所以现在我每次使用该函数时都会删除div中的文本并插入新内容。

我该如何解决这个问题？

Answer 1

试试这个：

function add () {
    $( div ).append( $( '<div>' ).load( 'add.php' ) );
}

其中div是对DIV元素的引用。（当然，您希望有一个参考，而不是在每个add()的调用中查询DIV。）

<强>更新

因此，从服务器返回的数据是'<li>...</li>'字符串，这意味着您要将其直接附加到UL元素：

$.get( 'addday.php', function ( data ) {
    $( ul ).append( data );
});

Answer 2

如果您打算使用该函数将内容添加到不同的</div>您可以将该函数传递给目标，而不是使用这样的静态选择器：

// Add Function //
function add($target){
    $target.load('add.php');
}

// Call Function and Pass jQuery Object of Target //
add($('#firstDiv'));
add($('#someOtherDiv'));

如果您打算使用该功能添加到同一个div，您可以修改上述功能：

function add($target){    
    $target.append($('<span>').load('add.php'));
}

我希望这有帮助！

Answer 3

使用$.ajax()您可以获得回复并将其附加到您的div：

$.ajax({
    url:     'add.php',
    type:    'GET',
    success: function(response) {
                var html = $("#div").html();
                $("#div").html(html + response);
                // or jQuery(response).wrap('<p />').appendTo('#div');
    });

Answer 4

$.get("add.php", function (data) {
    $("#div").append(data);
});

Answer 5

您可以将.get()函数与特定成功处理程序一起使用：

$.get('add.php', function(data) {
  $('#div').append(data);
});

Answer 6

尝试：

$.get('add.php', function(data) {
    $('#div').append(data);
});

如何告诉Jquery在使用加载函数时不要删除所有内容？

6 个答案: