Javascript 如何使用jQuery设置outerHTML

我有一个用户控件。例：

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

一些html

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

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

新html

---

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

如果您还返回了div divItem

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

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

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

如果不返回div divItem

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

只需放置新的html：

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

---

可以使用

.load（）

将来自AJAX调用的数据放置到DOM元素中

你只需要

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

这只是替换了div的innerHTML:

我想这就是您搜索的内容

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

---

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

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();

var item_1=$（''）.text（'item 1'）；
var item_2=$（''）.text（'item 2'）；
变量项_3=$（''）.text（'项3'）；
// 1/.
//不要用这种方式，因为它很难阅读
$（'#divItem'）.prop（'outerHTML'，item_1.prop（'outerHTML'）+item_2.prop（'outerHTML'）+item_3.prop（'outerHTML'）；
// 2/.
//不要用这种方式，因为它和第一个的是一样的
$（'#divItem'）[0]。outerHTML=item_1.prop（'outerHTML'）+item_2.prop（'outerHTML'）+item_3.prop（'outerHTML'）；
// 3/.
//如果您使用这种方式，我们如何继续将“#divItem”替换为“item_2”？
var obj=$（'#divItem'）。替换为（item_1）；
//“replaceWith”返回一个被替换为“item_1”的对象
//无法继续使用“项目2”和“项目3”
//当然，如果你不想写新行的话
第1项之后（第2项）；
//或
第2项。后面插入（第1项）；
// 4/.
//如果我们这样写，结果应该是：“项目3项目2项目1”
$（“#divItem”）。在（第#1项）之后。在（第#2项）之后。在（第#3项）之后；
//因此，正确的**内联**解决方案应该是：
$（'#divItem'）。在（item#3）之后。在（item#2）之后。在（item#1）之后。删除（）；

你试过吗？@roman是的，因为如果我看到你的，我的不是最好的方法，我想提供一个完全正确的答案。但是你得到了+1。你应该清理这个答案，因为当Jin试图用新的html替换旧的html时，它提供了两个答案。你应该用.replaceWith强调，这样你就会得到我的+1