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插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
jQuery实现tab栏切换效果
Dec 22 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
基于文本的留言簿
2006/10/09 PHP
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
js使用递归解析xml
2014/12/12 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
js实现表格数据搜索
2020/08/09 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python得到windows自启动列表的方法
2018/10/14 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
python 常见的反爬虫策略
2020/09/27 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
大学三好学生主要事迹范文
2015/11/03 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android