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 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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
杏林同学录(四)
2006/10/09 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
React组件的三种写法总结
2017/01/12 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python 标准差计算的实现(std)
2019/07/29 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
python序列类型种类详解
2020/02/26 Python
python爬虫基础知识点整理
2020/06/02 Python
Python中关于logging模块的学习笔记
2020/06/03 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
物流创业计划书
2014/02/01 职场文书
励志演讲稿800字
2014/08/21 职场文书
债务纠纷代理词
2015/05/25 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书