比较jquery中的after(),append(),appendTo()方法
html页面:
<p id="myp1">我的兴趣爱好是:</p>
<button id="b1">after函数</button>
<button id="b2">append函数</button>
<button id="b3">appendTo函数</button>
js页面
$(document).ready(function () {
$("#b1").click(function () {
$("#myp1").after("<b>骑车</b>");
})
$("#b2").click(function () {
$("#myp1").append("<e>打球</e>");
})
$("#b3").click(function () {
$("<i>烘焙</i>").appendTo("#myp1");
})
})
最后结果:
说明,after()方法,插入的元素在选取元素的后面,并且是外面。append(),appendTo()的结果是一样的,只是写法不同,append()方法也是在选取元素的后面插入元素,不过是在选取元素的内部插入。
在css中有:after伪元素来对选取的元素插入新的元素。
css页面:
#myp1::after{
content:"骑车," "打球," "烘焙";
}
最后结果:
可以看出,css伪元素是在选取元素的内部插入。为了实现同样的功能,CSS的伪元素的方法似乎比jquery中append()的方法更加简单。
既然有向后插入元素,那也有向前插入元素的方法,在此不详细的阐述了,原理其实都是一样的。
DOM对象有个appendChild(Node),的方法,指的是像节点中添加子节点,实现的效果与jquery的append()的效果是一样的,只不过它的参数必须是DOM对象,如果Node是页面中已经存在的元素,则表示将Node移动到目标处。而Jquery的append()方法中传入的参数可以是字符串,DOM对象,也可以是Jquery对象或者数组。如果是Jquery对象,则表示,将这个Jquery对象移动到目标处,而不是复制粘贴了。这一点要区别出来,不然很容易出错
比较jquery中的after(),append(),appendTo()方法的更多相关文章
- jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)
jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...
- jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强)
jquery-7 jquery中的文档处理方法有哪些(方法的参数表示功能增强) 一.总结 一句话总结:多看参考文档,多看主干目录.一般的功能分两个方法来实现,一个对应标签,一个对应标签和事情,比如克隆 ...
- js进阶 12-13 jquery中one方法和trigger方法如何使用
js进阶 12-13 jquery中one方法和trigger方法如何使用 一.总结 一句话总结: 1.one()方法和on()方法的区别是什么? 除了one()只执行一次,其它和on()一模一样,包 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- 浅析jQuery中常用的元素查找方法总结
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文 ...
- 【转发】JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 //1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#t ...
- jquery中prop()方法和attr()方法
接着上一篇笔记的疑惑,找了下prop()方法和attr()方法的区别. 原来query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. ...
- js进阶 10-3 jquery中为什么用document.ready方法
js进阶 10-3 jquery中为什么用document.ready方法 一.总结 一句话总结: 1.document.ready和window.onload的区别:用哪个好? document. ...
- JQuery中html、append、appendTo、after、insertAfter、before、insertBefore、empty、remove的使用
html方法,给元素添加html代码或者清空html代码(参数为空字符串): append向元素的末尾添加html代码: appendTo这个方法跟append方法的很像,只是要添加的html代码的目 ...
随机推荐
- day 12 内置函数,装饰器,递归函数
内置函数 内置函数:python给咱们提供了一些他认为你会经常用到的函数,68种 内置函数 abs() dict() help() min() setattr() all() di ...
- 完全卸载jdk
完全卸载jdk 如(卸载jdk1.7.0_80), 当卸载jdk时出现删除信息不全,导致无法安装,可通过此方法实现完全卸载. 1.打开系统运行输入regedit(注册表)分别查找以下路径 (1) ...
- 在myeclipse中修改发布到tomcat的项目目录名称
在项目上右键-->Properties 搜索web-->Project Facets(Web) 更改右侧Web Content-root的信息
- 织梦替换ueditor百度编辑器,支持图片水印 教程
1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...
- JavaScript中双叹号(!!)和单叹号(!)
转自:JavaScript中双叹号(!!)作用 经常看到这样的例子: var a: var b=!!a; a默认是undefined.!a是true,!!a则是false,所以b的值是false,而不 ...
- Python.URLs
1. The Future of Asynchronous IO in Python https://medium.com/@paulcolomiets/the-future-of-asynchron ...
- 定时任务起的java进程没有释放导致oracle的问题not availavle & out of memory
最近发现一个问题,我们设置了一个定时任务,用于每天的对账,每天的对账都是启动一个java程序(jar包),时间久了,出现下面的问题: 有很多CardPaymentBatch.jar进程驻留在系统当中, ...
- 更好地限制一个UITextField的输入长度
要限制一个UITextField的输入字数,首先想到的应该是通过 UITextFieldDelegate 的代理方法来限制: - (BOOL)textField:(UITextField *)text ...
- GitHub上README.md教程 详情介绍 (修改图片连接地址错误)
最近对它的README.md文件颇为感兴趣.便写下这贴,帮助更多的还不会编写README文件的同学们. README文件后缀名为md.md是markdown的缩写,markdown是一种编辑博客的语言 ...
- python实现文件下载图片视频
最近在学习爬虫,在爬取网站时很多时候是需要将图片或视频下载到本地 今天就来说说如何使用urllib将图片保存到本地 以下代码均为win7 python3.6.* 方法一(使用下载函数保存) from ...