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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php session 预定义数组
2009/03/16 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
javascript常用方法汇总
2014/12/02 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
使用yeoman构建angular应用的方法
2017/08/14 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
python实发邮件实例详解
2019/11/11 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
python脚本定时发送邮件
2020/12/22 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
软件工程师面试题
2012/06/25 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
六一节目主持词
2014/04/01 职场文书
2014司机年终工作总结
2014/12/05 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
Django migrate报错的解决方案
2021/05/20 Python
nginx实现动静分离的方法示例
2021/11/07 Servers
Windows7下FTP搭建图文教程
2022/08/05 Servers