最近在做WordPress主题时遇到了评论框的一些问题，主要是评论采用什么形式来展现给用户。其一是使用弹出层，将表单展示在弹出层上。还有一种就是今天我们要讲的jQuery移动HTML元素位置，移动我们的评论框，谁需要回复评论，咱们就将表单移动到他附近，表示回复的是该用户的评论。
jQuery移动HTML元素位置
首先我们需要引入jQuery，这个东西我就不多做什么了，可以使用官方的链接（这里为了方便我就使用代码狗博客的地址引用了），在HTML内容中的head标签中进行引用。
<script type=“text/JavaScript” src=“http://code.jquery.com/jquery-1.4.1.min.js”></script>
然后需要一些标签，具体代码如下：
<html> <head> <meta charset="UTF-8"> <script type='text/javascript' src='https://www.dAImadog.com/wp-content/themes/dux/js/libs/jquery.min.js?ver=2.0'></script> <script> $(function(){ $('#alll').click(function(){ $('#test1').append($('#commentform')); }); }); </script> </head> <body> <form method="post" id="commentform"> <div class="comt"> <div class="comt-box"> <textarea placeholder="发表点意见吧" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea> <div class="comt-ctrl"> <div class="comt-tips"><input type="hidden" name="comment_post_ID" value="1535" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"> <div class="comt-tip comt-error" style="display: none;">#</div></div> <button type="submit" name="submit" id="submit" tabindex="5">提交评论</button> </div> </div> </div> </form> <div id="test1" style="width:800px;height:100px;background:#cff;text-align:center;"></div> <a id='alll' href="javascript:;" >点击</a> </body> </html>
以上代码主要使用了jQuery的append方法，上面的js代码的意思是当id=alll的标签被点击时，执行将id=commentform的标签元素移动到id=test1元素的后面。
点击id=alll的标签元素后，就可以看到我们的表单被移动到了浅色背景的div中。
