让代码更简单

jQuery移动HTML元素位置

重要:本文最后更新于2019-08-05 08:52:36,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

最近在做WordPress主题时遇到了评论框的一些问题,主要是评论采用什么形式来展现给用户。其一是使用弹出层,将表单展示在弹出层上。还有一种就是今天我们要讲的jQuery移动HTML元素位置,移动我们的评论框,谁需要回复评论,咱们就将表单移动到他附近,表示回复的是该用户的评论。

jQuery移动HTML元素位置

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&amp;&amp;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中。

感觉很棒!可以赞赏支持我哟~

1 打赏

评论 (0)

登录后评论
QQ咨询 邮件咨询 狗哥推荐