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中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 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
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Pycharm保存不能自动同步到远程服务器的解决方法
2019/06/27 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Python列表推导式实现代码实例
2020/09/09 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
路政管理求职信
2014/06/18 职场文书
司机岗位职责说明书
2014/07/29 职场文书
党员先进事迹材料
2014/12/19 职场文书
颐和园的导游词
2015/01/30 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书