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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
php通过文件流方式复制文件的方法
2015/03/13 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python内置函数OCT详解
2016/11/09 Python
python requests post多层字典的方法
2018/12/27 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python切图九宫格的实现方法
2019/10/10 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
使用Python封装excel操作指南
2021/01/29 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
《永远的白衣战士》教学反思
2014/04/25 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
爱国影片观后感
2015/06/18 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
Python函数对象与闭包函数
2022/04/13 Python