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操作css样式
May 15 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery实现点击关注和取消功能
Jul 03 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 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
如何开始收听短波广播
2021/03/01 无线电
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
python中子类继承父类的__init__方法实例
2016/12/15 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python元组知识点总结
2019/02/18 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
kafka监控获取指定topic的消息总量示例
2019/12/23 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
如何用SQL语句进行模糊查找
2015/09/25 面试题
市场营销职业生涯规划书范文
2014/01/12 职场文书
联谊会主持词
2014/03/26 职场文书
C++程序员求职信
2014/05/07 职场文书
机关搬迁方案
2014/05/18 职场文书
生活部的活动方案
2014/08/19 职场文书
迎七一演讲稿
2014/09/12 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers