jQuery 怎么使用新元素来替换所选元素? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
在 jQuery 中, 可以通过 replaceAll() 方法或 replaceWith() 方法来用新元素来替换所选元素.
replaceAll() 方法用指定的 html 内容或元素替换被选元素.
replaceWith() 方法用指定的 HTML 内容或元素替换被选元素.
提示: replaceWith() 与 replaceAll() 作用相同. 差异在于语法: 内容和选择器的位置, 以及 replaceAll() 无法使用函数进行替换.
示例 1: 使用 replaceAll() 方法
使用 document.createElement() 来创建一个新的 DOM 元素, 然后用它替换被选元素.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".btn1").click(function() {
- $(document.createElement("div")).replaceAll("p");
- });
- });
- </script>
- <style>
- div{height:20px;background-color:yellow;margin:10px;}
- </style>
- </head>
- <body>
- <p>
- 一个 p 段落.
- </p>
- <p>
- 另一个 p 段落.
- </p>
- <button class="btn1">
- 用新的 div 替换所有 p 段落
- </button>
- </body>
- </HTML>
效果图:
示例 2: 使用 replaceWith() 方法
使用 document.createElement() 来创建一个新的 DOM 元素, 然后用它替换被选元素.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".btn1").click(function() {
- $("p").replaceWith(document.createElement("div"));
- });
- });
- </script>
- <style>
- div{height:20px;background-color:yellow;margin:10px;}
- </style>
- </head>
- <body>
- <p>
- 一个 p 段落.
- </p>
- <p>
- 另一个 p 段落.
- </p>
- <button class="btn1">
- 用新的 div 替换所有 p 段落
- </button>
- </body>
- </HTML>
效果图:
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/16970.html