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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 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处理数组和XML之间的互相转换
2016/06/02 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
jQuery 选择器理解
2010/03/16 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
javascript实现yield的方法
2013/11/06 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
Bootstrap表单布局
2016/07/19 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
python远程登录代码
2008/04/29 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
python如何安装下载后的模块
2020/07/03 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
护理专业的自荐信
2013/10/22 职场文书
结婚典礼证婚词
2014/01/08 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
股权收购意向书
2014/04/01 职场文书
门店业绩提升方案
2014/06/08 职场文书
教师节晚会主持词
2015/06/30 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript