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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 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网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
js获取div高度的代码
2008/08/09 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
机器学习10大经典算法详解
2017/12/07 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
C语言面试题
2013/05/19 面试题
生物化工专业个人自荐信
2013/09/26 职场文书
如何写你的创业计划书
2014/01/07 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers