想要使用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>
效果图: