after,before,insertAfter,insertBefore的作用

这几个方法的作用是插入外部节点,所谓外部插入节点就是我们平常在网页编程中手动添加代码到某一句语句的前面或后面,如图:

红色框的P是在蓝色框span的前面插入的外部节点,反过来说蓝色框的span是在红色框的p后面插入的外部节点。

再来说说表中的函数:

after(content):content为插入到元素外部后面的内容

例子:

$("A").after("<p>hello</p>")

在元素A外部的后面插入一个内容为hello的p标签

after(function):这里的function指的是某一个方法名,这一个方法必须返回一个值才能被调用

例子:

$("B").after(retHtml); //插入内容
function retHtml() {
   var str = "<span><b>Write Less Do More</b><span>";
   return str;
}

在元素B外部后面添加retHtml方法里面的内容,而方法retHtml里面的返回值是 【var str = "<span><b>Write Less Do More</b><span>";】这一串内容,所以B元素外部后面添加的内容为“<span><b>Write Less Do More</b><span>”

而后面的before(content),before(function)两个方法的作用是和after方法反向而已,即在元素外部前面添加内容,其基本用法都是一样的

insertAfter(content):insert这个单词的意思是插入,顾名思义这个方法其实是和appendTo的作用是一样的,只不过它是在某元素的外部插入

其中content这个参数是传一个目标元素

例子:

$("A").insertAfter($("B"))

将A元素插入到B元素外部的后面

insertBefore(content):很明显这个就是和insertAfter起到反向的作用,即在某元素的外部前面插入内容

时间: 2024-07-31 18:22:51

after,before,insertAfter,insertBefore的作用的相关文章

js中常用追加元素的几种方法:append,appendTo,after,before,insertAfter,insertBefore,appendChild

js中常用追加元素的几种方法,点击下面每个按钮,即可查看效果 我是第一个子元素 我是第二个子元素 append appendTo prepend prependTo after before appendChild insertAfter insertBefore

Asp.Net 初级 高级 学习笔记

本文并非作者原创,但是作者发表! 不知道十年后,会用多少人收益我的文章,哈哈! 各位,来加个关注![注*]改文章总结了ASP.Net从入门到高级的知识! 朱磊:2012 - 0212 -------------- [朱磊是本文的原创大神,据说当年在黑马刚毕业,月薪税前1W]-------------01.Main函数是什么?在程序中使用Main函数有什么需要注意的地方?02.CLR是什么?程序集是什么?当运行一个程序集的时候,CLR做了什么事情?03.值类型的默认值是什么?(情况一:字段或全局静

Html.Partial和Html. RenderPartial用法

Html.Partial和Html. RenderPartial用法 Html.partial和RenderPartial的用法与区别Html.partial和RenderPartial都是输出html片段,区别在于Partial是将视图内容直接生成一个字符串并返回(相当于有个转义的过程),RenderPartial方法是直接输出至当前 HttpContext(因为是直接输出,所以性能好).因此它们在视图中的使用方式是不同的:MVC2:输出到 HttpContext输出为string 直接到页面

DOM技术分享

js代码判断浏览器种类IE.FF.Opera.Safari.chrome及版本 投稿:mdxy-dxy 这篇文章主要分享了判断IE.FF.Opera.Safari.Chrome等浏览器和版本的两种方法,需要的朋友可以参考下 因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) re

zepto.js 源码注释

/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(function(undefined) { if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''

jQuery DOM操作之结点转移复制

jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的内容复制到div标签里 $('div').append( $('p').clone(true))是复制一份到div标签里,原来的标签还保留着 $(function(){ $(".nm_ul li").click(function(){ //当clone参数设置为true时还可以将按钮上绑定

Html.Partial和Html. RenderPartial

圣殿骑士-蓝剑行动 Html.Partial和Html. RenderPartial用法 Html.Partial和Html. RenderPartial用法 Html.partial和RenderPartial的用法与区别Html.partial和RenderPartial都是输出html片段,区别在于Partial是将视图内容直接生成一个字符串并返回(相当于有个转义的过程),RenderPartial方法是直接输出至当前 HttpContext(因为是直接输出,所以性能好).因此它们在视图中

zepto的源代码注释(转)

/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(function(undefined) { if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''

C#知识回顾

Main函数是什么? a) 程序入口函数 在程序中使用Main函数有什么需要注意的地方? a) Main函数不能变,有且只有一个 CLR是什么? a) 公共语言运行时 b)  Common Language RunTime 程序集是什么? a) 编译后代码的集合.(包括exe和dll). 加载项目里所有的类到内存,并找到其中的主函数,并作为默认的启动函数调用执行. 当运行一个程序集的时候,CLR做了什么事情? a) 加载项目所有的类到内存,并找到其中的主函数作为默认的启动函数调用执行,但是,如果