jQuery 插入注释帮助

Question

大家好，我正在尝试学习如何在某些 html 代码中插入注释而无需刷新页面。我知道 jQuery 能够将注释插入 div 区域，但我在找到类似淡入的示例时遇到问题。这是我的注释代码:

<div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> 
   <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
      <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
      <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
      <tr><td class="Commentsaying">this is a test comment</td></tr> 
   </table> 

<div id="stylized" class="myform" align="center"> 
    <form id="CommentForm122" name="CommentForm122"> 
            <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> 
            <textarea name="txtComment" class="box" id="txtComment"></textarea> 
            <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> 
            <div class="buttons" align="center"> 
                <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> 
            </div> 
    </form> 
</div> 
</div>

我需要再次插入的代码是:

<table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
  <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
  <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
  <tr><td class="Commentsaying">this is a test comment</td></tr> 
</table>

但同样，我无法找到使用 jQuery 自动将这部分代码插入到另一个“table>/table>”框下的示例。

因此，在通过 jQuery 插入后，代码应如下所示:

<div id="CommentBox122" style="width:80%; padding:2px; margin-left:25px;"> 
   <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
      <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
      <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
      <tr><td class="Commentsaying">this is a test comment</td></tr> 
   </table> 

   <table width="650px" border="0" cellpadding="0" cellspacing="5" style="margin-left:20px; background-color: #F8F8F8; border-bottom:#CCC solid 1px;"><tr> 
      <td width="10%" rowspan="2" align="center" class="Commentimage"><img src="img/avatar/gkrgimmkdhmggfh.jpg" height="60" /></td> 
      <td width="90%" class="Commentposted">Posted by me on Saturday, May 01, 2010 @ 4:37: PM</td></tr> 
      <tr><td class="Commentsaying">this is a test comment</td></tr> 
   </table>

<div id="stylized" class="myform" align="center"> 
    <form id="CommentForm122" name="CommentForm122"> 
            <div align="center" style="text-align:center; color:#F00; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">Would you like to leave a comment, Robert?</div> 
            <textarea name="txtComment" class="box" id="txtComment"></textarea> 
            <input name="txtpostid" type="text" id="txtpostid" style="visibility:hidden; display:none; height:0px; width:0px;" value="Demo43639" /> 
            <div class="buttons" align="center"> 
                <button type="button" id="Button122" name="Button122" class="positive" onclick="doStuff();"><img name="Submit" src="img\buttonimgComment.png" alt="" />Post Comment</button> 
            </div> 
    </form> 
</div> 
</div>

一如既往，任何帮助都会很棒! :o)

大卫

Answer 1

鉴于您的结构，您可以这样做:

$("#stylized").before(htmlString);

其中“#stylized”是输入表单的容器 ID，“htmlString”是要插入的新表的 html。此方法将始终将新字符串附加到表列表的末尾、输入表单之前。

编辑:实际上，我对您输入表单的 ID 表示怀疑 - 看起来它可能不是该页面唯一的。您也可以这样做:

$("#stylized", "#CommentBox122").before(htmlString);

这会将“#stylized”ID 选择器限制在元素“#CommentBox122”的上下文中。