jQuery替换节点元素的操作方法

 更新时间:2018年03月18日 16:47:47   作者:abernhong  
这篇文章通过实例代码给大家讲解了jquery替换节点元素的操作方法及动态页面的实现代码,非常不错,需要的朋友参考下吧

替换节点元素的操作,实现动态页面的,代码如下

<!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>

效果图如下:


              如图(1)

              如图(2)

总结

以上所述是小编给大家介绍的jQuery替换节点元素的操作方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • EasyUI实现二级页面的内容勾选的方法

    EasyUI实现二级页面的内容勾选的方法

    在使用EasyUI的时候,我们经常回遇到在二级页面进行勾选的时候,这里给大家分享一个比较简单实用的实现方法,希望大家能够喜欢。
    2015-03-03
  • JQuery对checkbox操作 (循环获取)

    JQuery对checkbox操作 (循环获取)

    下面是Jquery对checkbox的一些操作,全选,反选,取消全选等等.
    2011-05-05
  • jquery tools 系列 scrollable(2)

    jquery tools 系列 scrollable(2)

    本文详细介绍scrollable中方法使用及本文完整示例。
    2009-09-09
  • jquery zTree异步加载、模糊搜索简单实例分享

    jquery zTree异步加载、模糊搜索简单实例分享

    这篇文章主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery实现的导航固定效果

    jquery实现的导航固定效果

    这篇文章主要介绍了jquery实现的导航固定效果,需要的朋友可以参考下
    2014-04-04
  • jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery插件PageSlide实现左右侧栏导航菜单

    jQuery pageSlide 是一个可以让网页出现滚动效果的jQuery插件,它可以控制一个隐藏页面的显示和关闭。具体来说,就是当前页占一个完整页面,隐藏页是看不到的,你设置一个控制的地方,点击该控制时触发事件,隐藏的页面就滑出来,再次点击隐藏页面以外的地方,它就又关闭
    2015-04-04
  • JQuery的ON()方法支持的所有事件罗列

    JQuery的ON()方法支持的所有事件罗列

    这篇文章主要介绍了JQuery的ON()方法支持的所有事件罗列,本文列出了所有ON()方法支持的事件,摘自jQuery1.8.3的源码,比较权威,需要的朋友可以参考下
    2015-02-02
  • jQuery弹出div层过2秒自动消失

    jQuery弹出div层过2秒自动消失

    这篇文章主要介绍了jQuery弹出div层过2秒自动消失的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-11-11
  • jQuery File Upload文件上传插件使用详解

    jQuery File Upload文件上传插件使用详解

    jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端.这篇文章主要介绍了jQuery File Upload文件上传插件使用,需要的朋友可以参考下
    2016-12-12
  • jQuery实现标签页效果实战(4)

    jQuery实现标签页效果实战(4)

    这篇文章主要为大家详细介绍了jQuery实现标签页效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论