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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery操作css样式
May 15 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jquery实现抽奖功能
Oct 22 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显示页码分页类的封装
2017/06/08 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
javascript局部自定义鼠标右键菜单
2020/12/08 Javascript
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
python文本数据处理学习笔记详解
2019/06/17 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
《灯光》教学反思
2014/02/08 职场文书
提拔干部考察材料
2014/05/26 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
志愿者活动总结报告
2014/06/27 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
物流业务员岗位职责
2015/04/03 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
python3.9之你应该知道的新特性详解
2021/04/29 Python
详解nginx location指令
2022/01/18 Servers
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS