Javascript 如何使用jQuery设置outerHTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8254703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set outerHTML with jQuery
提问by Jin Ho
I have a UserControl. Ex:
我有一个用户控件。前任：
<div id="divItem">
some html
</div>
The ajax request return new html of this UC from server. Ex:
ajax 请求从服务器返回此 UC 的新 html。前任：
<div id="divItem">
new html
</div>
I want to replace the old html by the new one. How could I do that. Thanks.
我想用新的 html 替换旧的 html。我怎么能那样做。谢谢。
回答by Niels
If you also return the div divItem
如果您还返回 div divItem
$("#divItem").replaceWith("NEW HTML");
Put the new HTML on the spot or replace the innerHTML, since they got the same container:
将新的 HTML 放在原处或替换 innerHTML，因为它们具有相同的容器：
$("#divItem").html($("NEW HTML").html());
If you dont return the div divItem
如果你不返回 div divItem
Just put the new html:
只需放置新的html：
$("#divItem").html("NEW HTML");
回答by Roman
I guess replaceWithis what you search.
我想replaceWith是您搜索的内容。
$('#divItem').replaceWith(serverResponse);
回答by Zut
Placing data from AJAX calls into a DOM element can be done using .load().
将来自 AJAX 调用的数据放入 DOM 元素可以使用.load().
$('#divItem').load('somePage.html');
回答by OptimusCrime
This is innterHTML because it's inside the div called divItem. It also looks like you want to replace the existing text (?)
这是内部 HTML，因为它位于名为 divItem 的 div 内。看起来您还想替换现有文本 (?)
If your returned new html is in a variable called results, you do this:
如果返回的新 html 位于名为 results 的变量中，则执行以下操作：
$('#divItem').html(results);
回答by OptimusCrime
If you want to replace 1 item with multiple items. You can try:
如果您想用多个项目替换 1 个项目。你可以试试：
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();
回答by David Hu
You just need
您只需要
$('#divItem').html('new html');
This just replaces the div's innerHTML: http://api.jquery.com/html/
这只是替换了 div 的innerHTML：http: //api.jquery.com/html/
