Question

我有一个UserControl。例如：

<div id="divItem">
some html
</div>

ajax请求从服务器返回此UC的新html。例如：

<div id="divItem">
    new html
</div>

我想用新的html替换旧的html。我怎么能这样做感谢。

Answer 1

如果您还返回div divItem

$("#divItem").replaceWith("NEW HTML");

将新HTML放在现场或替换innerHTML，因为它们具有相同的容器：

$("#divItem").html($("NEW HTML").html());

如果你没有返回div divItem

只需输入新的html：

$("#divItem").html("NEW HTML");

Answer 2

我猜replaceWith就是您搜索的内容。

$('#divItem').replaceWith(serverResponse);

Answer 3

可以使用.load()将来自AJAX调用的数据放入DOM元素。

$('#divItem').load('somePage.html');

Answer 4

这是innterHTML，因为它位于div中，名为divItem。您还希望替换现有文本（？）

如果您返回的新html位于名为results的变量中，则执行以下操作：

$('#divItem').html(results);

Answer 5

如果要用多个项目替换一个项目。您可以尝试：

var item_1 = $('<div>').text('item 1');
var item_2 = $('<div>').text('item 2');
var item_3 = $('<div>').text('item 3');

// 1/.
// dont' use this way because it's hard to read
$('#divItem').prop('outerHTML', item_1.prop('outerHTML') + item_2.prop('outerHTML') + item_3.prop('outerHTML'));

// 2/.
// dont' use this way because it's same to the first's
$('#divItem')[0].outerHTML = item_1.prop('outerHTML') + item_2.prop('outerHTML') + item_3.prop('outerHTML');

// 3/.
// if you use this way, how can we continue replace "#divItem" with "item_2"?
var obj = $('#divItem').replaceWith(item_1);

// "replaceWith" returns an object which was replaced with "item_1"
// there is no way to continue with "item_2" and "item_3"
// sure, if you DON'T want to write a new line
item_1.after(item_2);

// or
item_2.insertAfter(item_1);

// 4/.
// if we write this, the result should be: "item 3item 2item 1"
$('#divItem').after(item_1).after(item_2).after(item_3);

// so, the correct **inline** solution should be:
$('#divItem').after(item_3).after(item_2).after(item_1).remove();

Answer 6

你只需要

$('#divItem').html('new html');

这只是替换了div的innerHTML：http://api.jquery.com/html/

如何使用jQuery设置outerHTML

6 个答案: