Original link of this article: https://blog.csdn.net/xzk9381/article/details/112858323
1. Insert an element to the end of the matched element
Use the append() method to insert an element into the matched element, the inserted element is located at the end of the specified element:
<!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>
If there are multiple matched elements, then elements will be inserted into all matched elements:
<!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>
2. Append the matched element to the last position inside another specified element
Use the appendTo() method to append the matched element to another specified element set. The inserted element is the last inside the specified element. In fact, it is the same as the above method, except that the order of the elements has changed:
<!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>
Third, insert an element to the first position inside the matched element
Use the prepend() method to insert an element into the first position inside the matched element. If there is no child element inside the element, you can also insert it directly (native JS method is not possible):
<!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>
Fourth, append the matched element to the first position inside another specified element
Use the prependTo() method to append the matched element to the first position inside another specified element:
<!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>
Original link of this article: https://blog.csdn.net/xzk9381/article/details/112858323