最近在做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.org/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中。
评论 （0）