jquery的dom操作方法中,包括了after与insertAfter,这两个方法名字相近,所实现的功能从名字中不容易分辨,所以在经过试验后撰文一篇以加深记忆。
测试代码如下:
<html>
<head>
<meta charset=”utf-8″>
<title>测试insertAfter与after的区别</title>
</head>
<body>
<ul>
<li class=”first”>first</li>
<li class=”middle”>middle</li>
<li class=”last”>last</li>
</ul>
</body>
</html>
自然状态下显示是这样的:
添加脚本:$(‘.first’).insertAfter($(‘.last’));
则会把first移到last后面去,变成了这样:
如果把insertAfter方法换为after,效果则为:
从上述对比可以看出,其实这两个方法的差别就像主语跟宾语的差别一样,是主与从的问题。
after方法,是把参数元素移到调用方法的元素的后面,而insertAfter方法则恰恰相反,是把调用方法的元素插入到参数元素的后面。
另外要注意的是,当要用这两个方法在dom树中添加新元素时,如”<li>new</li>”,这样的html字符串不能出现在after方法的调用主体或insertAfter的参数中,因为这样一来,jquery不知道要把新元素放到哪里去,反而会导致要相关的原有元素丢失。
相关推荐
jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项
主要介绍了jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
jQuery面试题库 以下是根据给定文件信息生成的相关知识点: jQuery 选择器 * jQuery 中的选择器有基本选择器、后代选择器、类选择器等。 * 不同的选择器可以在不同的场景下使用,例如基本选择器用于选择某个标签...
6.2.5 insertAfter(content) 97 6.2.6 insertBefore(content) 97 6.3 包裹 98 6.3.1 wrap(html) 98 6.3.2 wrap(elem) 99 6.3.3 wrap(fn) 99 6.3.4 unwrap() 100 6.3.5 wrapAll(html) 100 6.3.6 wrapAll(elem) 101 ...
一、after()和before()方法的区别 after()——其方法是将方法里面的参数添加到jquery对象后面去; 如:A.after(B)的意思是将B放到A后面去; before()——其方法是将方法里面的参数添加到jquery对象前面去。 ...
insertAfter(content) insertBefore(content) 包裹 wrap(html|ele|fn) unwrap() wrapall(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) replaceAll(selector) 删除 empty() remove(...
$.after( content ), .after( fn() ) $.before( content ), .before( fn() ) $.insertAfter( target ) $.insertBefore( target ) Inserting Around $.unwrap( ) $.wrap( wrappingElement ), .wrap( fn ) $.wrapAll...
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...
insertAfter(content) insertBefore(content) 包裹 wrap(html|ele|fn) unwrap() wrapAll(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) replaceAll(selector) 删除 empty() remove(...
与after方法相反 $("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理) $("元素名称").empty() 将该元素的内容设置为空 $("元素名称").insertAfter(content); 将该元素插入到...
insertAfter(content) insertBefore(content) 包裹 wrap(html) wrap(elem) wrapAll(html) wrapAll(elem) wrapInner(html) wrapInner(elem) 替换 replaceWith(content) replaceAll(selector) 删除 empty() ...
insertAfter(content) insertBefore(content) 包裹 wrap(html) wrap(elem) wrapAll(html) wrapAll(elem) wrapInner(html) wrapInner(elem) 替换 replaceWith(content) replaceAll(selector) 删除 empty() ...
jQuery 1.4.1 速查表 -- Shawphy, 原作:G. Scott Olson 核心 jQuery 核心函数 jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(html, props) jQuery(elements) jQuery() jQuery(callback) jQuery 对象访问...
本文实例讲述了JQuery中DOM节点的操作与访问方法。分享给大家供大家参考,具体如下: Jquery中DOM节点的操作 已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) ...