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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
jquery实现点击弹出对话框
Feb 08 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
使javascript也能包含文件
2006/10/26 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
师范应届生求职信
2013/11/15 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
读群众路线的心得体会
2014/09/03 职场文书
2014年学校总务处工作总结
2014/12/08 职场文书
2015年党支部书记工作总结
2015/05/21 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
python计算列表元素与乘积详情
2022/08/05 Python