如何使用jQuery替换一个HTML块为另一个HTML块

Question

我想替换以下的HTML代码块：

<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>

使用这个代码块：

<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>

我查看了jQuery中的replace函数，但不确定如何应用。

- tonyf

Answer 1

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

- Matthew Flaschen

---

@Matthew，你能否重新格式化你的输入？换行或其他方式使其更易读？ - BerggreenDK

@BerggreenDK 我已将它分成多个连接的字符串。 - Matthew Flaschen

Answer 2

如果您有一个包装器想要放置它，请使用.html(...)。

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

- Daniel A. White

---

在这种情况下，使用replaceWith函数更容易。 - Brian McKenna