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 08 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jquery图片预览插件实现方法详解
Jul 18 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获取远程文件大小
2015/10/20 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP书写格式详解(必看)
2016/05/23 PHP
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
vuex 的简单使用
2018/03/22 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
用JavaScript实现贪吃蛇游戏
2020/10/23 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
python编程线性回归代码示例
2017/12/07 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
python中property和setter装饰器用法
2019/12/19 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
JS原生实现轮播图的几种方法
2021/03/23 Javascript
英语自荐信范文
2013/12/11 职场文书
关于赌博的检讨书
2014/01/08 职场文书
初中同学聚会感言
2014/02/11 职场文书
市场营销战略计划书
2014/05/06 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2016教师国培研修感言
2015/12/08 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
Web应用开发TypeScript使用详解
2022/05/25 Javascript