jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/113610949，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

一、replaceWith() 方法

$(DOM).replaceWith(newContent) 用于替换集合中所有匹配的元素，并且返回被删除的元素集合：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('body>input').click(function (){$('body>ul>li:gt(1)').replaceWith('<li>替换后的元素</li>')})})</script>
</head>
<body><input type="button" value="替换"><ul><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li></ul>
</body>
</html>

二、replaceAll() 方法

$(newContent).replaceAll(DOM) 与 $(DOM).replaceWith(newContent) 方法功能一样，只不过是参数位置调换了一下（可以直接在后面赋予样式）：

<!DOCTYPE html>
<html>
<head><title></title><script src="jquery-1.12.4.js"></script><script type="text/javascript">$('document').ready(function (){$('body>input').click(function (){$('<li>替换后的元素</li>').replaceAll('body>ul>li:gt(1)').css('color','orange');})})</script>
</head>
<body><input type="button" value="替换"><ul><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li></ul>
</body>
</html>

jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素相关推荐

JQuery学习04篇(层次选择器)
直接po图和代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
JQuery学习22篇(事件委托)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
jQuery学习（四）— jQuery的ready事件和原生JS的load事件的区别
jQuery学习(四)- jQuery的ready事件和原生JS的load事件的区别 jQuery的ready事件和原生JS的load事件的区别: 页面中可以有多个ready事件,而load事件会出现 ...
jQuery学习（三）—jQuery使用步骤以及注意事项
jQuery学习(三)-jQuery使用步骤以及注意事项 jQuery的使用步骤: 第一步:利用script标签将jQuery文件引入到当前的HTML中第二步:在文档中插入一个新的script标签在 ...
jQuery学习（二）—jQuery对象的获取
jQuery学习(二)-jQuery对象的获取
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
jQuery 学习-样式篇（六）：jQuery 获取和设置表单元素的值
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
jQuery学习笔记（二）—— 操作DOM元素
使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使用a ...
jQuery 学习-样式篇（三）：jQuery 选择器类型详解
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...

jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

一、replaceWith() 方法

二、replaceAll() 方法

jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素相关推荐

最新文章

热门文章