×

学习添加元素append,prepend,after,before四种方法区别对比

作者:andy0012018.10.30来源:Web前端之家浏览:438评论:0
关键词:JS

学习添加元素append,prepend,after,before四种方法区别对比。

jQuery是一个平常比较喜欢用的js框架,因为上手比较简单吧,哈哈,下面呢,就介绍一下Jquery中如何添加元素。jquery添加元素一共有四个语句,分别是append(),prepend(),after(),before()

append的用法 

这个方法的意思是在选中目标的结尾插入内容。举个例子:

<p>hello</p>

如果执行下面这个插入语句,上面的语句会变成什么样子

$("p").append("<b>world</b>")

执行了这个插入语句会变成

<p>hello<b>world</b></p>

也就是说,在插入的结尾标签前插入此内容。

prepend的用法。 

顾名思义,跟上面一种用法相反,就是在标签开始的地方插入内容。 

还是以上面第一段代码为例子。

$("p").prepend("<b>world</b>")//插入语句

<p><b>world</b>hello</p>//结果

after的用法 

这个语句的用法就是在被选元素之后插入内容。 

同样以上面的为例子。

$("p").after("<b>world</b>")//插入语句

<p>hello</p><b>world</b>//结果

在选中标签后面插入内容

before的用法 

跟after相反,在标签前面插入内容

$("p").before("<b>world</b>")//插入语句

<b>world</b><p>hello</p>//结果

下面把这四种用法的代码放在一块,更容易理解。

<p>hello</p>

$("p").append("<b>world</b>")使用append插入

<p><b>world</b>hello</p>//显示结果


$("p").prepend("<b>world</b>")//使用prepend插入

<p><b>world</b>hello</p>//显示结果

$("p").after("<b>world</b>")//使用after插入语句

<p>hello</p><b>world</b>//显示结果

$("p").before("<b>world</b>")//使用before插入语句

<b>world</b><p>hello</p>//显示结果

是不是很简单呀,大家是不是都已经掌握了。本人新手,如哪里有说的不恰当的地方,欢迎大家指点。

温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/JS235424234.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

  • admin

    可以啊,请加群私聊。...

  • 访客

    换链接:http://davin.xin/pc/navigation...

  • 访客

    alert('哈哈')...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero