想要使用 jQuery 将元素移动到另一个元素中, 可以使用 jQuery 的内置方法 append() 或 prepend(). 下面本篇文章就来给大家介绍一下, 希望对大家有所帮助.
方法 1: 使用 append() 方法
jQuery 的 append() 方法用于在所选元素的末尾插入一些内容.
语法:
$(selector).append( content, function(index, html) )
参数: 此方法接受上述两个参数
● content: 它是必需参数, 用于指定要在所选元素末尾插入的内容. content 的可能值是 HTML 元素, jQuery 对象和 DOM 元素.
● function(index,HTML): 它是可选参数, 用于指定将返回要插入的内容的函数.
● index: 用于返回元素的索引位置.
● HTML: 用于返回所选元素的当前 HTML.
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- #parent { height: 40px; width: 300px; background: green; padding: 10px;
- margin: 0 auto; } #child { height: 40px; width: 150px; margin: 0 auto;
- color: yellow; }
- </style>
- </head>
- <body style="text-align:center;">
- <div id="parent">
- </div>
- <br>
- <p id="child">
- Hello World! Hello World!
- </p>
- <br>
- <button onclick="myGeeks()">
- 移动
- </button>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- function myGeeks() {
- $("#parent").append($("#child"));
- }
- </script>
- </body>
- </HTML>
效果图:
方法 2: 使用 prepend() 方法
prepend() 方法是 jQuery 中的内置方法, 用于在所选元素的开头插入指定的内容.
语法:
$(selector).prepend(content, function)
参数: 此方法接受上述两个参数
● content: 需要参数, 用于指定需要插入的内容.
● function: 可选参数, 用于指定调用后执行的函数.
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style>
- #parent { height: 40px; width: 300px; background: peru; padding: 10px;
- margin: 0 auto; } #child { height: 40px; width: 150px; margin: 0 auto;
- color: yellow; }
- </style>
- </head>
- <body style="text-align:center;">
- <div id="parent">
- </div>
- <br>
- <p id="child">
- Hello World! Hello World!
- </p>
- <br>
- <button onclick="myGeeks()">
- 移动
- </button>
- <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
- </script>
- <script>
- function myGeeks() {
- $("#parent").prepend($("#child"));
- }
- </script>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/jquery/10418.html