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实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
php跨服务器访问方法小结
2015/05/12 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
ExtJS中设置下拉列表框不可编辑的方法
2014/05/07 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
jquery实现上传文件进度条
2020/03/26 jQuery
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
javascript实现点击产生随机图形
2021/01/25 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
市场营销毕业生自荐信
2013/11/23 职场文书
施工资料员的岗位职责
2013/12/22 职场文书
开工仪式主持词
2014/03/20 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
部门2014年度工作总结
2014/11/12 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
婚育证明格式
2015/06/17 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang