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. WPF这样的界面应该如何编写呢?

    如上图: 外围是一个Border,内部填充一个Grid,Grid分成两行,第一行有一个按钮可以进行操作(主要是操作ListBox的数据源:增加和删除对象),第二行填充一个ListBox,绑定数据源并根 ...

  2. nginx使用ngx_lua访问后端Thrift-Server实现和介绍

    背景 随着openresty的出现,让nginx使用lua解决一些业务的能力大幅度提高,ngx_lua可以使用nginx自生的基于事件驱动的IO模型,和后端的存储,业务等系统实现非阻塞的连接交互. 如 ...

  3. 解决eclipse编辑js和html卡的问题

    window -> Preference -> General -> Editors -> Text Editors -> HyperLinking ->  取消勾 ...

  4. JAVA输入输出流

    概述: 各种流类型(类和抽象类)都位于位于java.io包中,各种流都分别继承一下四种抽象流中的一种: 类型 字节流 字符流 输入流 InputStream Reader 输出流 OutputStre ...

  5. python的反转(切片)

    看下面代码吧,简单来说不如直接看代码.如下: #coding=utf-8 __author__ = 'debude' a = 'python' print a[::-1] #从最后n开始,每走一位都打 ...

  6. mysql数据库史上最详细起步教程(1)

    本文主要讲解mysql的操作,尽量保证步骤的详细与清晰,希望能帮到大家. 1.登录后进行数据库的创建:create database lf(数据库名);  (一定要记住分号,mysql在语句的结束符就 ...

  7. dex文件格式三

    先来看看整体的结构,结构体定义在DexFile.h里面   在dexFileSetupBasicPointers中设置各个子结构体,当然是在解析DexHeader之后 源码在DexFile.c文件中 ...

  8. JAVA基础学习——1.2 环境搭建 之eclipse安装及中文化

    安装好jdk,配置好环境变量以后,下面就可以进行安装eclipse了. 闲话少说,eclipse下载地址:http://www.eclipse.org/downloads/ 不大用关注checksum ...

  9. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  10. 《转载》GET,POST,PUT,DELETE的区别

    本文转载自:转载请说明出处,谢谢[hyddd(http://www.cnblogs.com/hyddd/)] Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT, ...