jQuery中appendTo()方法用法实例
本文实例讲述了jQuery中appendTo()方法用法。分享给大家供大家参考。具体分析如下:
此方法把匹配的元素插入指定元素结尾,插入位置在元素的内部。appendTo()
方法的作用和append()
方法是相同的,但是语法是不同的,尽管形式一样。
定义和用法
appendTo() 方法在被选元素的结尾插入 HTML 元素。
提示:如需在被选元素的开头插入 HTML 元素,请使用 prependTo() 方法。
语法
$(content).appendTo(selector)
参数 | 描述 |
---|---|
content | 必需。规定要插入的内容(必须包含 HTML 标签)。 注意:如果 content 是已存在的元素,它将从当前位置被移除,并在被选元素的结尾被插入。 |
selector | 必需。规定把内容追加到哪个元素上。 |
演示代码一
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>脚本之家(jb51.net)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("<span>Hello World!</span>").appendTo("p"); }); }); </script> </head> <body> <button>在每个P元素结尾插入span元素。</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
实例代码二:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="//www.jb51.net/" /> <title>appendTo()函数-脚本之家</title> <style type="text/css"> p{ height:100px; width:100px; border:1px solid blue; } div{ height:200px; width:200px; border:1px solid green; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").appendTo("div"); }) }) </script> </head> <body> <p>我是p的内容</p> <div>我是div</div> <button>点击查看效果</button> </body> </html>
以上代码中,当点击按钮的时候,能够将p元素移动到div元素的内部的尾部。
希望本文所述对大家的jQuery程序设计有所帮助。
- jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
- 解决jQuery使用append添加的元素事件无效的问题
- jquery append与appendTo方法比较
- jquery 追加元素append、prepend、before、after用法与区别分析
- jquery在ie7下选择器的问题导致append失效的解决方法
- jquery append 动态添加的元素事件on 不起作用的解决方案
- jQuery使用append在html元素后同时添加多项内容的方法
- 解决Jquery向页面append新元素之后事件的绑定问题
- jQuery中append()方法用法实例
- JS实现jQuery的append功能
相关文章
jQuery Selectors(选择器)的使用(九、表单对象属性篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法,我将以实例方式进行讲述,以简单,全面为基础,不会涉及很深,我的学习方法:先入门,后进阶!2009-12-12修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
jQuery.Autocomplete 是jquery的流行插件,能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能,支持ajax数据加载。2009-10-10在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
这篇文章主要介绍了在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南,需要的朋友可以参考下2014-12-12Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
由于Jquery中的Ajax的async默认是true(异步请求),如果想一个Ajax执行完后再执行另一个Ajax, 需要把async=false就可以了2013-11-11
最新评论