最近在做WordPress主题时遇到了评论框的一些问题，主要是评论采用什么形式来展现给用户。其一是使用弹出层，将表单展示在弹出层上。还有一种就是今天我们要讲的jQuery移动HTML元素位置，移动我们的评论框，谁需要回复评论，咱们就将表单移动到他附近，表示回复的是该用户的评论。
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中。
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/241452.html