jQuery替换节点元素的操作方法


Posted in jQuery onMarch 18, 2018

替换节点元素的操作,实现动态页面的,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>中国</title>
 <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
 <script type="text/javascript">
  $(document).ready(function () {
   $("button#button-replaceWith").click(function () {
    $("p").replaceWith("<strong>您好!我最喜欢的IT公司是:</strong>");
    $("[name='name-replace']").replaceWith("<tr><td>name-replace</td><td>name-replace</td><td>name-replace</td></tr><tr><td>name-replace</td><td>name-replace</td><td>name-replace</td></tr>");
   });
  });

 </script>
</head>
<body>
 <h2>超实用的jquery代码段-jquery插入节点元素的方法</h2>
 <p>您好!您最喜欢的IT公司是:</p>
 <ul>
  <li title="Google">Google</li>
  <li title="Apple">Apple</li>
  <li title="Microsoft">Microsoft</li>
 </ul>
 <table name="name-replace">

 </table>
 <button id="button-replaceWith">替换节点元素</button>
</body>
</html>

效果图如下:

jQuery替换节点元素的操作方法

如图(1)

jQuery替换节点元素的操作方法

如图(2)

jQuery替换节点元素的操作方法

总结

以上所述是小编给大家介绍的jQuery替换节点元素的操作方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
jQuery遮罩层实例讲解
May 11 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 #jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
You might like
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
php新建文件的方法实例
2019/09/26 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
详解python的数字类型变量与其方法
2016/11/20 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python实现录音小程序
2020/10/26 Python
python sorted函数的小练习及解答
2019/09/18 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python自动巡检H3C交换机实现过程解析
2020/08/14 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python