web-dev-qa-db-fra.com

Comment définir outerHTML avec jQuery

J'ai un UserControl. Ex:

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

La demande ajax renvoie le nouveau code HTML de cet UC à partir du serveur. Ex:

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

Je veux remplacer l'ancien HTML par le nouveau. Comment pourrais-je faire ça. Merci.

javascriptjqueryasp.netajax
26
Jin Ho

Si vous retournez également le div divItem 

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

Mettez le nouveau code HTML sur place ou remplacez le code innerHTML, car ils ont le même conteneur:

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

Si vous ne retournez pas le div divItem

Il suffit de mettre le nouveau code HTML:

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

Je suppose que replaceWith est ce que vous recherchez. 

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

Le placement de données d'appels AJAX dans un élément DOM peut être effectué à l'aide de .load().

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

Si vous souhaitez remplacer un élément par plusieurs éléments. Tu peux essayer:

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

Ceci est innterHTML car il se trouve dans la division appelée divItem. Il semble également que vous souhaitiez remplacer le texte existant (?)

Si votre nouveau code HTML renvoyé se trouve dans une variable appelée résultats, procédez comme suit:

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