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中map函数的两种方式
Apr 07 jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery实现简单飞机大战
Jul 05 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实现的下载css文件中的图片的代码
2010/02/08 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python open读写文件实现脚本
2008/09/06 Python
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
wxPython学习之主框架实例
2014/09/28 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
Djang中静态文件配置方法
2015/07/30 Python
Python反射用法实例简析
2017/12/22 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python稀疏矩阵及参数保存代码实现
2020/04/18 Python
python关于倒排列的知识点总结
2020/10/13 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
2014年预备党员学习两会心得体会
2014/03/17 职场文书
安全标语大全
2014/06/10 职场文书
员工安全责任书范本
2014/07/24 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
创业计划书之农家乐
2019/10/09 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
小程序实现筛子抽奖
2021/05/26 Javascript