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 ajax请求struts action实现异步刷新
Apr 19 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 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优于Node.js的五大理由分享
2012/09/15 PHP
记录PHP错误日志 display_errors与log_errors的区别
2012/10/09 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
js身份证验证超强脚本
2008/10/26 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python实现2048小游戏
2015/03/30 Python
Django返回json数据用法示例
2016/09/18 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
详解anaconda安装步骤
2020/11/23 Python
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
高三学习决心书
2014/03/11 职场文书
专家推荐信模板
2014/05/09 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
中秋晚会活动方案
2014/08/31 职场文书
远程培训的心得体会
2014/09/01 职场文书
违章停车检讨书
2014/10/21 职场文书
医院党建工作总结2015
2015/05/26 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
学历证明范文
2015/06/16 职场文书
体育委员竞选稿
2015/11/21 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书