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访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
JavaScript中的对象继承关系
2016/08/01 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
2018/11/13 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
2019/06/05 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
Python生成器定义与简单用法实例分析
2018/04/30 Python
基于python绘制科赫雪花
2018/06/22 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
python线程优先级队列知识点总结
2021/02/28 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
感恩节活动方案
2014/01/27 职场文书
学校教师读书活动总结
2014/07/08 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
教师党员自我评议不足范文
2014/10/19 职场文书
2014年仓管员工作总结
2014/11/18 职场文书