How to replace a block of HTML with another block of HTML using jQuery

Question

I would like to replace the following html block:

<table class="t12PageBody" cellpadding="0" cellspacing="0" width="100%" summary="">
  <tr><td colspan="2">#REGION_POSITION_01#</td></tr> 
</table>

<table width="100%" summary="">
 <tr>
  <td class="t12ContentBody" valign="top"> #SUCCESS_MESSAGE# #NOTIFICATION_MESSAGE# #BOX_BODY# #REGION_POSITION_04##REGION_POSITION_05##REGION_POSITION_06##REGION_POSITION_07##REGION_POSITION_08#</td>
  <td align="right" valign="top" class="t12ContentBody">#REGION_POSITION_03#<br /></td>
 </tr>
</table>

with this block:

<div id = "banner">
<div class="Logo"></div>
<img src="http://www.example.com/home/images/spacer.gif" height="35" width="180"  border="0" alt=""> <font class="bannertext">&APPNAME.</font>
<div class="bannerText">
    <div class="hmenu"><ul>&APPLICATION_LINKS.</ul></div>
</div>

I looked at the replace function in jQuery but unsure how to apply.

Matthew Flaschen · Accepted Answer · 2010-04-29 01:54:18Z

14

var newHTML = '<div id = "banner"><div class="Logo"></div>' +
              '<img src="http://www.abc.com/home/images/spacer.gif" ' + 
              'height="35" width="180"  border="0" alt=""> <font ' + 
              'class="bannertext">&APPNAME.</font><div class="bannerText">' + 
              '<div class="hmenu"><ul>&APPLICATION_LINKS.</ul>' + 
              '</div></div>';
$('table.t12PageBody').replaceWith(newHTML);

edited Apr 29, 2010 at 1:54

answered Apr 29, 2010 at 1:18

Matthew Flaschen

286k53 gold badges523 silver badges554 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BerggreenDK Over a year ago

@Matthew would it be possible for you to reformat your entry? break the lines apart or something to make it more readable?

Matthew Flaschen Over a year ago

@BerggreenDK I've split it into multiple concatenated strings.

Daniel A. White · Accepted Answer · 2010-04-29 01:18:12Z

0

If you have a wrapper for where you want to put it, use .html(...)

$('#wrapper').html('<div id = "banner">' + ... );

answered Apr 29, 2010 at 1:18

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

2 Comments

Brian McKenna Over a year ago

It's easier just to use the replaceWith function in this case.

HausO Over a year ago

for this is required jQuery

Collectives™ on Stack Overflow

How to replace a block of HTML with another block of HTML using jQuery

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related