本文原文链接:https://blog.csdn.net/xzk9381/article/details/112858323
一、向匹配的元素内部的最后插入元素
使用 append() 方法可以向匹配的元素内部插入元素,插入的元素是位于指定元素内部的最后:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('#div1').append($('<div class="mydiv" id="div2">测试<span class="myspan">子元素</span></div>'))
})
</script>
</head>
<body>
<div id="div1">div测试</div>
</body>
</html>
如果匹配到的元素有多个,那么会向所有匹配到的元素内部插入元素:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('.div1').append($('<div class="mydiv" id="div2">测试<span class="myspan">子元素</span></div>'))
})
</script>
</head>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
二、将匹配的元素追加到另一个指定元素内部最后的位置
使用 appendTo() 方法可以将匹配的元素追加到另一个指定的元素集合中,插入的元素是位于指定元素内部的最后。其实与上面的方式一样,只不过是元素之间顺序变了:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('<div class="mydiv" id="div2">测试<span class="myspan">子元素</span></div>').appendTo('.div1')
})
</script>
</head>
<body>
<div class="div1">div测试</div>
<div class="div1">div测试</div>
<div class="div1">div测试</div>
</body>
</html>
三、向匹配的元素内部的首位插入元素
使用 prepend() 方法可以向匹配的元素内部的首位插入元素,如果该元素内部没有子元素,那么也一样可以直接插入(原生 JS 方法不可以):
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('.div1').prepend($('<div class="mydiv" id="div2">测试<span class="myspan">子元素</span></div>'));
})
</script>
</head>
<body>
<div class="div1">div测试</div>
<div class="div1">div测试</div>
<div class="div1">div测试</div>
</body>
</html>
四、将匹配的元素追加到另一个指定元素内部的首位
使用 prependTo() 方法可以将匹配的元素追加到另一个指定元素内部的首位:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('<div class="mydiv" id="div2">测试<span class="myspan">子元素</span></div>').prependTo('.div1');
})
</script>
</head>
<body>
<div class="div1">div测试</div>
<div class="div1">div测试</div>
<div class="div1">div测试</div>
</body>
</html>
本文原文链接:https://blog.csdn.net/xzk9381/article/details/112858323