jquery移动节点实例

本文实例讲述了jquery移动节点的实现方法，分享给大家供大家参考。具体实现方法如下：

方法很方便简单，使用 append()方法即可。代码如下：

代码如下:

<html>
<head>
<title>jquery移动节点</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("button").click(function(){
   $("div").append($("p"));
  });
 });
</script>
<style type="text/css">
h5{color:blue;}
div{width:300px;height:60px;border:solid 1px green;}
div p{color:red;}
</style>
</head>
<body>
<h5>jquery移动节点</h5>
<button>点我</button>
<div>哈哈哈哈哈哈，太搞笑了</div>
<p>你太幽默了</p>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • jQuery替换节点用法示例(使用replaceWith方法)

    jQuery替换节点用法示例(使用replaceWith方法)

    本文实例讲述了jQuery替换节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)

    本文实例讲述了jQuery插入节点和移动节点的方法.分享给大家供大家参考,具体如下: 1. 插入节点: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" ty

  • jQuery:节点(插入,复制,替换,删除)操作

    复制代码 代码如下: <html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>jQuery插入,复制.替换和删除节点</title> <script type="text/javascript" src="jquery-1.3.2.js&q

  • 移动节点的jquery代码

    复制代码 代码如下: //节点的移动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF

  • Jquery对新插入的节点 绑定Click事件失效的解决方法

    1.有人说用 Live, 事实上现在最新的Jquery已经不支持 Live 了.live的解决方法如下: 你可以看这个 也可以不看 ,只是做到心中有数就可以了.下面介绍ON的方法. live:Live的使用介绍 2.有人用了ON 来解决, 这个解决方法基本在理. On :On的介绍,能解决问题 On的方法,基本能解决问题,但是你也要根据你的具体情况做选择.并不是每个人的代码都像上面这个案例描述的那么简单.但是万变不离其宗. 我是这样来做的,最终把问题解决了. 我有一个UL 标签是静态的,就是说不

  • JQuery插入DOM节点的方法

    本文实例讲述了JQuery插入DOM节点的方法.分享给大家供大家参考.具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中.将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点.前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容. 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示.读者可以根据实际需求灵活地做出多种选择. HTML DOM结构如下: <p class

  • jQuery删除节点用法示例(remove方法)

    jQuery删除节点用法示例(remove方法)

    本文实例讲述了jQuery删除节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery DOM插入节点操作指南

    方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> appendTo() 将所有匹配的元素追加到指定的元素中 .实际上,使用该方法是颠倒了常规 的$(A).append(B)的操作,是将A追加到B

  • jQuery复制节点用法示例(clone方法)

    jQuery复制节点用法示例(clone方法)

    本文实例讲述了jQuery复制节点的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="text/

  • jQuery遍历节点树方法分析

    jQuery遍历节点树方法分析

    本文实例讲述了jQuery遍历节点树方法.分享给大家供大家参考,具体如下: demo.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type=&

随机推荐