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


Posted in Javascript onJanuary 16, 2014

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() 方法在被选元素之前插入内容。

演示代码:

<script type="text/javascript" src="http://common.3water.com/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

html结构图

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

Javascript 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
Dec 14 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
jQuery DOM删除节点操作指南
Mar 03 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
jquery实现抽奖功能
Oct 22 jQuery
jQuery 设置 CSS 属性示例介绍
Jan 16 #Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 #Javascript
jquery sortable的拖动方法示例详解
Jan 16 #Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 #Javascript
js查找某元素中的所有图片地址的方法
Jan 16 #Javascript
jQuery - css() 方法示例详解
Jan 16 #Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 #Javascript
You might like
PHP中绘制图像的一些函数总结
2014/11/19 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
实例讲解vue源码架构
2019/01/24 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
vue下axios拦截器token刷新机制的实例代码
2020/01/17 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
用Python进行TCP网络编程的教程
2015/04/29 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Python多线程爬虫简单示例
2016/03/04 Python
简单的python后台管理程序
2017/04/13 Python
python线程池threadpool实现篇
2018/04/27 Python
python K近邻算法的kd树实现
2018/09/06 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
python openssl模块安装及用法
2020/12/06 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
普师专业个人自荐信范文
2013/11/26 职场文书
采购主管岗位职责
2014/02/01 职场文书
成绩单家长评语大全
2014/04/16 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
十岁生日答谢词
2015/01/05 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers