EN
JavaScript - append element using jQuery
0 points
In this article, we would like to show you how to append elements using jQuery.
In this example, we use append() method to add the element to the document.body element.
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
</head>6
<body>7
<script>8
9
// create element10
var element = $('<div class="red-box">This is internal text...</div>');11
12
// append element to body13
$(document.body).append(element);14
15
</script>16
</body>17
</html>In this example, we get a handle to the parentElement and use append() method to add the element to it.
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>5
</head>6
<body>7
<div class="parent"></div>8
<script>9
10
var parentElement = $(".parent");11
12
// create childElement13
var childElement = $('<div class="red-box">This is internal text...</div>');14
15
// append element to body16
$(parentElement).append(childElement);17
18
</script>19
</body>20
</html>