jQuery中prepend()方法用法实例


Posted in Javascript onDecember 25, 2014

本文实例讲述了jQuery中prepend()方法用法。分享给大家供大家参考。具体分析如下:

此方法可向所有匹配元素的内部的前面追加HTML内容。

特别说明:

此方法是追加内容,也就是原来的内容还在。
HTML内容就是内容中可以包含HTML标签,并且能够被浏览器渲染。
文本内容是先将内容中的html预定义字符转换成html字符实体,这样html标签就不会被渲染。

语法结构:

$(selector).prepend(content)

实例代码:
实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("div").prepend("<b>  好好学习</b>"); 

}) 

</script>

</head>

<body>

<div>原来内容</div>

</body>

</html>[/size]

[size=2]

在原来div内容的前面追加内容。
实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

div 

{

  height:150px;

  width:150px;

  background-color:green;

  margin-top:10px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){  

  $("button").click(function(){ 

    $(".html").prepend("<b>好好学习</b>"); 

    $(".text").text("<b>好好学习</b>");     

  }) 

}) 

</script>

</head>

<body>

<div class="html"></div>

<div class="text"></div>

<button>点击查看效果</button>

</body>

</html>

通过此实例大家可以观察一下html内容和文本内容的区别。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
js导出格式化的excel 实例方法
Jul 17 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
详解JavaScript对象类型
Jun 16 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
jQuery中append()方法用法实例
Dec 25 #Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 #Javascript
jQuery中html()方法用法实例
Dec 25 #Javascript
jQuery中val()方法用法实例
Dec 25 #Javascript
24款热门实用的jQuery插件推荐
Dec 24 #Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 #Javascript
Javascript 多物体运动的实现
Dec 24 #Javascript
You might like
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python操作kafka实践的示例代码
2019/06/19 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
Python网页解析器使用实例详解
2020/05/30 Python
Pycharm中如何关掉python console
2020/10/27 Python
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
日本语毕业生自荐信
2014/02/01 职场文书
黄河象教学反思
2014/02/10 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
人事文员岗位职责
2014/02/16 职场文书
护士个人自我鉴定
2014/03/24 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2015年党员自评材料
2014/12/17 职场文书
地方课程教学计划
2015/01/19 职场文书
公司放假通知怎么写
2015/04/15 职场文书
公司员工体检通知
2015/04/21 职场文书
故意伤害罪辩护词
2015/05/21 职场文书