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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
详解jquery选择器的原理
Aug 01 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery轮播图功能制作方法详解
Dec 03 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
php获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
document.all与WEB标准
2020/05/13 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
js的三种继承方式详解
2017/01/21 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
Python基于PycURL实现POST的方法
2015/07/25 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
个人找工作求职简历的自我评价
2013/10/20 职场文书
创先争优制度
2014/01/21 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
《打电话》教学反思
2016/02/22 职场文书
DE1107机评
2022/04/05 无线电
Redis高并发缓存架构性能优化
2022/05/15 Redis
Shell中的单中括号和双中括号的用法详解
2022/12/24 Servers