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 05 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery-App输入框实现实时搜索
Nov 19 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使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
大家未必知道的Js技巧收藏
2008/04/07 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
go和python调用其它程序并得到程序输出
2014/02/10 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
python测试mysql写入性能完整实例
2018/01/18 Python
python实现超简单的视频对象提取功能
2018/06/04 Python
python3学生名片管理v2.0版
2018/11/29 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python3使用GUI统计代码量
2019/09/18 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python根据文本生成词云图代码实例
2019/11/15 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
关于VPN
2012/06/10 面试题
医院工作检讨书范文
2014/02/10 职场文书
会计系毕业生求职信
2014/05/28 职场文书
创建文明城市标语
2014/06/16 职场文书
完整版商业计划书
2014/09/15 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python