1.jQuery append() 方法 

jQuery append() 方法在被选元素的结尾插入内容。 
实例

复制代码代码如下:

$("p").append("Some appended text."); 

2.jQuery prepend() 方法 

jQuery prepend() 方法在被选元素的开头插入内容。 
实例

复制代码代码如下:

$("p").prepend("Some prepended text."); 

3、after() 和 before() 方法 

jQuery after() 方法在被选元素之后插入内容。 
jQuery before() 方法在被选元素之前插入内容。 
实例

复制代码代码如下:

$("img").after("Some text after"); 
$("img").before("Some text before"); 

下面脚本之家小编给补充一下

append() 方法在被选元素的结尾插入内容。

prepend() 方法在被选元素的开头插入内容。

after() 方法在被选元素之后插入内容。

before() 方法在被选元素之前插入内容。

演示代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
  <ul>
    <li>第一个li标签</li>
  </ul>
</div>
 
<script>
 
  //append
  $('.testdiv ul').append('<li>append 插入的li</li>');
  //prepend
  $('.testdiv ul').prepend('<li>prepend 插入的li</li>');
  //after
  $('.testdiv ul').after('<li>after 插入的li</li>');
  //before
  $('.testdiv ul').before('<li>before 插入的li</li>');
 
</script>

jQuery 追加元素的方法如append、prepend、before,after(转)的更多相关文章

  1. jquery 追加元素的方法(append prepend after before 的区别)

    append() 方法在被选元素的结尾插入内容. prepend() 方法在被选元素的开头插入内容. after() 方法在被选元素之后插入内容. before() 方法在被选元素之前插入内容. &l ...

  2. jQuery 追加元素的方法如append、prepend、before

    1.jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容. 实例 复制代码代码如下: $("p").append("Some ...

  3. jquery 追加元素的方法

    append() 方法在被选元素的结尾插入内容. 在里面 prepend() 方法在被选元素的开头插入内容. 在里面 after() 方法在被选元素之后插入内容. 在外面before() 方法在被选元 ...

  4. jquery 追加元素/jquery文档处理,插入、修改、移动、删除指定的DOM元素.

    jquery 追加元素 $("#content").append("..."); // 添加到元素内部最后面 $("#content").p ...

  5. JQuery获取元素的方法总结

    JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实 ...

  6. jquery追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())

    最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  7. jquery追加元素的不同语法

    问题 项目中越来越多的地方需要实现无刷新来更新页面局部内容,使用ajax从后台获取数据然后追加到页面中.那么怎么获取数据之后如何实现元素的追加呢? 解决 jQuery提供追加元素函数,掌握常用的四种追 ...

  8. 原生JS和jQuery创建元素的方法

    jQ创建元素的方法 1.原生代码 .creatElement('tr')` .innerHTML = '<h1>加油</h1>' document.write('<h1& ...

  9. Jquery DOM元素的方法

    jQuery DOM 元素方法 函数 描述 .get() 获得由选择器指定的 DOM 元素. .index() 返回指定元素相对于其他指定元素的 index 位置. .size() 返回被 jQuer ...

随机推荐

  1. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  2. 李炎恢《PHP第二季视频教程》之总结

    课时 <面向对象工具[1]>. 语法: __autoload.  __call.__tostring.__clone 1.   autoload 自动引用类.不用包含类,call屏蔽调用类 ...

  3. C++ 操作XML文件 使用MSXML.DLL

    使用MSXML.DLL读写XML; 文件顶部加入 #import "msxml3.dll"; using namespace MSXML2; //这两句作用是,在程序的文件夹下生成 ...

  4. .net mvc中的表单异步提交

    // // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...

  5. Yii rbac原理和实践

    Yii框架中集成分层的 RBAC,代码位于vendor\yiisoft\yii2\rbac中,rbac工作原理分为两部分,建立授权数据和进行权限检查. 如上,一个角色拥有某个权限,如果希望用户拥有这个 ...

  6. Webstorm 2016.3激活码

    webstorm 2016.3 可用激活码, 使用activation code方式激活 就这么任性,就这么长 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKI ...

  7. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  8. 大型App要搞的几个系统

    路由模块: 解耦各个业务,统一收敛页面跳转,动态决策跳转实现:   鉴权模块:收敛鉴权项目(比如登录.输入密码.短信验证.扫脸),后台动态控制鉴权项目:   收银台:收敛支付,统一到收银台:   开关 ...

  9. Linux下用户组、文件权限详解

    在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用户所在的组 所有者 一般为文件的创建者,谁创 ...

  10. protocol http not supported or disabled in libcurl apt-get

    ubuntu 14.04 碰到了这个莫名其妙的问题.谷歌了一把,解决方案如下:http://askubuntu.com/questions/683857/curl-1-protocol-https-n ...