jQuery对内容的获取,添加,移动的.append(), .html(), .prepend(), .after(), .before()
来源:互联网 发布:巨人网络 吃鸡 编辑:程序博客网 时间:2024/05/24 07:27
在jQuery中我们使用.append(), .appendTo(), .html(), .text(), .prepend(), .prependTo(), .after(), .before(), .insertAfter(), .insertBefore() 是很方便的。
注意:是在引入jQuery库的前提下使用。
一、.append();.appendTo() 插入不替换
.append()函数将特定内容插入到每个匹配元素里面的最后面,作为它的最后一个子元素(last child),(如果要做为第一个子元素(first child)用.prepend)。
.appendTo()和.append()的功能相同。主要不同的是语法:插入内容和目标的位置不同。
解释:.append()选择表达式在函数的前面,参数是将要插入的内容。对于.appendTo()刚好相反,内容在方法前面,无论是一个选择器表达式或创建作为标记上的标记,它都
将被插入到目标容器的结尾。
将被插入到目标容器的结尾。
二、.html();.text() 插入替换(还可以获取)
设置元素的内容情况下:
1、.html()会把选择器下的已存在的元素全部替换为当前设置的元素(或文本),元素中的任何内容会完全被新的内容取代( 用新的内容替换这些元素前,jQuery从子元素删除其他结构,如数据和事件处理程序。防止内存溢出)。
2、text()会把选择器下的已存在的文本全部替换为当前设置的文本。
获取的情况下:
1、.html()获取集合中第一个匹配元素的HTML内容( 如果选择器匹配多个元素);
2、.text()得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的 文本内容;在XML 和 HTML 文档中都能使用。
3、.text()方法不能使用在 input 元素或scripts元素上。
input
或 textarea
需要使用.val()方法获取或设置文本值。得到scripts元素的值,使用.html()方法;三、.prepend(), .prependTo() 插入不替换
1、如果一个被选中的元素被插入到另外一个地方,这是移动而不是复制。
2、.prepend()
方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append() ).3、.prepend()
和.prependTo() 实现同样的功能,主要的不同是语法,插入的内容和目标的位置不同。 对于 .prepend()
而言,选择器表达式写在方法的前面,作为待插入内容的容器,将要被插入的内容作为方法的参数。而 .prependTo()
正好相反,将要被插入的内容写在方法的前面,可以是选择器表达式或动态创建的标记,待插入内容的容器作为参数。四、.after(), .insertAfter()
1、在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。
2.
.after()
和.insertAfter() 实现同样的功能。主要的不同是语法——内容和目标的位置不同。 对于.after()
,要插入的内容来自方法的参数:$(target).after(contentToBeInserted)
(即,选择器表达式在方法的前面,参数是将要插入的内容) 。 对于.insertAfter()
, 刚好相反,内容在方法前面并且插入到目标的前面, 而目标是传递给.insertAfter()
方法的参数:$(contentToBeInserted).insertAfter(target)
。五、.before(),.insertBefore()
1、 根据参数设定,在匹配元素的前面插入内容(外部插入)
2、
.before()
和.insertBefore() 实现同样的功能。主要的不同是语法——内容和目标的位置不同。 对于.before()
,要插入的内容来自方法的参数:$(target).before(contentToBeInserted)
(愚人码头注:即,选择器表达式在方法的前面,参数是将要插入的内容) 。 对于.insertBefore()
, 刚好相反,内容在方法前面并且插入到目标的前面, 而目标是传递给.insertBefore()
方法的参数: $(contentToBeInserted).insertBefore(target)
。3、例子: 重要: 如果有多个目标元素,内容将被复制然后插入到每个目标里面。(以上五大点共有的内容)
以上五大点需要注意,一个共同点:如果一个被选中的元素被插入到另外一个地方,这是移动而不是复制。
举其中五个中的其中一个:
移动之前:
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
移动方法:
$('.container').prepend($('h2'));
结果:
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
0 0
- jQuery对内容的获取,添加,移动的.append(), .html(), .prepend(), .after(), .before()
- jQuery如何向HTML添加指定的内容,append() ,prepend() ,after(),before()
- jQuery HTML节点元素修改、追加的方法 html()、append()、prepend()、after()、before()
- jQuery中的append()和prepend(),after()和before()的区别
- jquery中append、prepend, before和after方法的区别
- jquery中append、prepend, before和after方法的区别
- jQuery的append/prepend和after/before有什么区别?
- jQuery中append/prepend与after/before的区别
- jquery after before append appendto prepend prependto的区别
- jquery的append、prepend、html、after、before 的总结和区别
- 知识点二:jQuery 添加方法>append()、prepend()、after()、before()之间的作用
- JQuery中对DOM元素的插入方式,append,prepend,after,before,wrap,wrapAll
- before、after、prepend、append四个的区别
- jQuery append()、prepend()和 after() 、before() 方法向元素插入或添加内容
- jquery中append、prepend, before和after方法的区别(一)
- jquery中append、prepend, before和after方法的区别(二)
- jq中append()、prepend()、after()、before()的区别详解
- jq中append()、prepend()、after()、before()的区别详解
- ZZULIOJ 1882: 蛤玮的魔法 (计算几何)
- 贪心,贪心!!
- ACDream 1062 面面数
- 编程珠玑第一章第一题的解法,常用的排序
- leetcode(318):Maximum Product of Word Lengths
- jQuery对内容的获取,添加,移动的.append(), .html(), .prepend(), .after(), .before()
- Android N版本(7.0)适配
- 【nodejs】数据统计平台碰到的坑
- log4j配置
- Day11、字符串及字符串函数
- MYSQL数据检索总结
- IOS之SQLite
- 大数据Spark企业级实战pdf 和 对应开发软件和测试数据文件下载地址
- 树状数组模板