jQuery操作元素追加内容示例


Posted in jQuery onJanuary 10, 2020

本文实例讲述了jQuery操作元素追加内容。分享给大家供大家参考,具体如下:

<html>
 <head>
 <title>jQuery操作文档结构</title>
 <meta charset="UTF-8"/>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
  //内部的操作
  function testAppend(){
  //获取需要操作的对象
  var showdiv=$("#showdiv");
  //进行添加操作,指定内容的追加
  showdiv.append("<b>赛高</b>");  //在对象内部的后面添加指定的内容,其是html可解析的内容,和html不同的是:html重新赋值(覆盖)这个在内容后面追加
  }
  function testAppend2(){
  //获取需要操作的对象
  var u2=$("#u2");
  //进行添加操作,指定内容的追加
//  u2.appendTo("#show01");  //在对象的内部后面添加利用选择器选择的对象内容,把前面的对象移动到后面的对象的内部后面(一个剪切复制操作)
  $("#u2").appendTo(show01);
  }
  function testprepend(){
  //获取需要操作的对象
  var showdiv=$("#showdiv");
  //进行添加操作,指定内容的追加
  showdiv.prepend("<i>境界的彼方</i>"); //在对象的内部前面添加内容
  }
  function testprependTo(){
  //获取需要操作的对象
  var showdiv=$("#showdiv");
  //进行添加操作,指定内容的追加
  $("#u2").prependTo(showdiv); //在对象的内部前面添加选择器的对象(移动到)
//  showdiv.prependTo("#u2");
  }
  //外部插入
  function testAfter1(){
  //获取需要操作的对象
  var showdiv=$("#showdiv");
  //进行添加操作,指定内容的追加
  showdiv.after("<b>もちろん</b>"); //在对象的外部的后面添加内容
  }
  function testAfter2(){
  //获取需要操作的对象
  var showdiv=$("#showdiv");
  //进行添加操作,指定内容的追加
  $("#u2").insertAfter(showdiv); //在对象的外部的后面添加选择器的对象(移动到)
//  showdiv.prependTo("#u2");
  }
  function testBefore1(){
  //获取需要操作的对象
  var showdiv=$("#showdiv");
  //进行添加操作,指定内容的追加
  showdiv.before("<b>もちろん</b>"); //在对象的外部的前面添加内容
  }
  function testBefore2(){
  //获取需要操作的对象
  var showdiv=$("#showdiv");
  //进行添加操作,指定内容的追加
  $("#u2").insertBefore(showdiv); //在对象的内部前面添加选择器的对象
//  showdiv.prependTo("#u2");
  }
 </script>
 <style type="text/css">
  #showdiv{
  width: 300px;
  height: 300px;
  border: solid 1px;
  }
  #show01{
  width: 300px;
  height: 300px;
  border: solid 1px;
  }
 </style>
 </head>
 <body>
 <h3>jQuery操作文档结构</h3>
 <h4>内部操作</h4>
 <input type="button" name="" id="" value="测试追加内容--append" onclick="testAppend()"/>
 <input type="button" name="" id="" value="测试移动内容--appendTo" onclick="testAppend2()"/>
 <input type="button" name="" id="" value="测试追加内容--prepend" onclick="testprepend()"/>
 <input type="button" name="" id="" value="测试移动内容--prependTo" onclick="testprependTo()"/>
 <hr />
 <h4></h4>
 <input type="button" name="" id="" value="测试追加内容--after" onclick="testAfter1()"/>
 <input type="button" name="" id="" value="测试移动内容--after" onclick="testAfter2()"/>
 <input type="button" name="" id="" value="测试追加内容--before" onclick="testBefore1()"/>
 <input type="button" name="" id="" value="测试移动内容--before" onclick="testBefore2()"/>
 <hr />
 <div id="showdiv">
  <i>Clannad</i>
 </div><br /><br />
 <div id="show01">
  <!--<u>Clannad After Story</u>-->
 </div>
 <span id="u2"><u>Clannad After Story</u></span>
 <hr /> 
 </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
JQuery实现图片轮播效果
May 08 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
详解jQuery中的prop()使用方法
Jan 05 #jQuery
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
php 生成随机验证码图片代码
2010/02/08 PHP
PHP计划任务、定时执行任务的实现代码
2011/04/23 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
Js获取事件对象代码
2010/08/05 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
python设置表格边框的具体方法
2020/07/17 Python
ddl,dml和dcl的含义
2016/05/08 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
创建精神文明单位实施方案
2014/03/08 职场文书
车辆工程专业求职信
2014/04/28 职场文书
人事专员岗位职责
2015/02/03 职场文书
质量负责人岗位职责
2015/02/15 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
详解在OpenCV中如何使用图像像素
2022/03/03 Python
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server