嘿所有,我正在尝试学习如何在某些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&gt; / table&gt;”的示例箱..
因此在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)
大卫
答案 0 :(得分:2)
鉴于您的结构,您可以这样做:
$("#stylized").before(htmlString);
其中“#stylized”是输入表单的容器ID,“htmlString”是您要插入的新表的html。此方法始终将新字符串附加到表列表的末尾,但在输入表单之前。
编辑: 实际上,我怀疑你输入表单的ID - 看起来它可能不是页面的唯一。你也可以这样做:
$("#stylized", "#CommentBox122").before(htmlString);
这会将“#stylized”ID选择器限制在元素“#CommentBox122”的上下文中。
答案 1 :(得分:0)
匹配评论框的最后一个元素,然后使用.before(
string,element,html )
插入评论。