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,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
基于jQuery拖拽事件的封装
Nov 29 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
python中常用检测字符串相关函数汇总
2015/04/15 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python最长回文串算法
2018/06/04 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python将unicode和str互相转化的实现
2020/05/11 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
应届生高等护理求职信
2013/10/12 职场文书
导游个人求职信范文
2014/03/23 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
天那边观后感
2015/06/09 职场文书
《海上日出》教学反思
2016/02/23 职场文书
2019年思想汇报
2019/06/20 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python