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 相关文章推荐
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JQuery实现折叠式菜单的详细代码
Jun 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
理解AngularJs指令
2015/12/10 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python进程间通信用法实例
2015/06/04 Python
Python判断Abundant Number的方法
2015/06/15 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Python timeit模块的使用实践
2020/01/13 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
PHP面试题及答案一
2012/06/18 面试题
Linux文件操作命令都有哪些
2016/07/23 面试题
业绩考核岗位职责
2014/02/01 职场文书
工会主席岗位责任制
2014/02/11 职场文书
母亲节感恩寄语
2014/02/21 职场文书
如何写好建议书
2014/03/13 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js
欧元符号 €
2022/02/17 杂记