JQuery中after、append、insertAfter、prepend的简单用法

阅读更多

afterappendinsertAfter都有向选定元素之后插入指定内容的功能,但还是有点不同的。

简单代码:

段落1

  

1、after:在选定元素之后插入指定的内容,该内容可以包含HTML标签。

使用after方法向

之后插入代码:$("div").after("

段落2

")

运行之后的代码结构为:
JQuery中after、append、insertAfter、prepend的简单用法_第1张图片

由此可知:使用after方法追加内容,是在选定的元素外部追加,也就是跳出选定元素在选定元素之后追加。

 

2、append:在选定元素的结尾插入指定内容,该内容也可以包含HTML标签。

使用append方法向

之后插入代码:$("div").append("

段落2

")

运行之后的代码结构为:
JQuery中after、append、insertAfter、prepend的简单用法_第2张图片

因此:使用append方法追加内容,是在选定元素的内部追加,没有跳出选定元素,直接在选定元素的尾部追加内容。

 

3、insertAfter:在被选元素之后插入指定内容或已有元素,该内容可以是HTML标签,也可以是选择器表达式

HTML标签:

使用insertAfter方法向

之后插入代码:$("

段落2

").insertAfter("div")

运行之后的结构为:
JQuery中after、append、insertAfter、prepend的简单用法_第3张图片

它的结构跟after的结构相同,也是在选定的元素外部追加内容,跳出选定元素之后追加。

 

选择器表达式:这种情况是在页面中存在要插入的元素。

简答的代码结构:

这是一个标题1

这是一个标题2

这是一个标题3

这是一个段落。

这是另一个段落。

 

使用insertAfter方法向

之后插入代码:$("h1").insertAfter("div")

 

运行之后的代码结构为:
JQuery中after、append、insertAfter、prepend的简单用法_第4张图片

再使用insertAfter方法向

之后插入代码:$("h1").insertAfter("p")

运行之后的代码结构为:
JQuery中after、append、insertAfter、prepend的简单用法_第5张图片 

由上面的两个例子可以看出:使用insertAfter方法插入已有元素,已有元素会被从当前位置移走,然后被添加到选定的元素之后。有点类似于:先复制一份已有元素,然后在页面上删除已有元素,再在每一个选定元素之后粘贴一份复制的已有元素。

 

5prepend:在选定元素的开头插入指定内容,该内容可以包含HTML标签。

使用prepend方法向

之后插入代码:$("div").prepend("

段落2

")

运行之后的代码结构为:
JQuery中after、append、insertAfter、prepend的简单用法_第6张图片

其结构跟append的结构相同,也是直接在选定元素的内部追加,不需要跳出选定元素,不同的是append是在选定元素的尾部追加,prepend是在选定元素的开头追加。

  • JQuery中after、append、insertAfter、prepend的简单用法_第7张图片
  • 大小: 18.7 KB
  • JQuery中after、append、insertAfter、prepend的简单用法_第8张图片
  • 大小: 22.3 KB
  • JQuery中after、append、insertAfter、prepend的简单用法_第9张图片
  • 大小: 17.4 KB
  • JQuery中after、append、insertAfter、prepend的简单用法_第10张图片
  • 大小: 27 KB
  • JQuery中after、append、insertAfter、prepend的简单用法_第11张图片
  • 大小: 18.3 KB
  • JQuery中after、append、insertAfter、prepend的简单用法_第12张图片
  • 大小: 16.2 KB
  • 查看图片附件

你可能感兴趣的:(JQuery,after,append,insertAfter)