web-dev-qa-db-ja.com

jQueryでouterHTMLを設定する方法

UserControlがあります。例：

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

Ajaxリクエストは、サーバーからこのUCの新しいhtmlを返します。例：

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

古いhtmlを新しいhtmlに置き換えたい。どうすればできますか。ありがとう。

javascriptjqueryasp.netajax
28
Jin Ho

div divItemも返す場合

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

同じコンテナを取得したため、新しいHTMLをその場で配置するか、innerHTMLを置き換えます。

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

div divItemを返さない場合

新しいhtmlを置くだけです：

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

replaceWith が検索対象だと思います。

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

AJAX呼び出しからのデータをDOM要素に配置するには、.load()を使用します。

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

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

これは、divItemと呼ばれるdiv内にあるため、internHTMLです。また、既存のテキスト（？）を置き換えたいようです

返された新しいhtmlがresultsという変数にある場合は、次のようにします。

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