How to add appending element using jquery

Question

Just want to ask how to create a element using jquery i am able to create a href using below code.

document.createElement("a");

How can i create a element inside another element , exactly below.

<a href="#"><i class="fa fa-list"></i></a>

Answer 1

You can use the append function with jQuery.

$("#add").click(function() {
 $('<a href="#"><i class="fa fa-list"></i></a>').appendTo(document.body);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<button id="add">Add Stuff</button>

• KaoriYui: Got it! i also declared a variable for the icon this.$element.append('<a href="#"><i class="fa '+icon+'"></i></a>'), thanks!
• Neil: Hey, could you mark as solution, by chance, it'd help a lot. And just a heads up that will return $element, instead do $('<a href="#"><i class="fa '+icon+'").appendTo($element) if you want the new thing.
• Neil: Is fa- included inside the icon? Additionally, it will only not display (but will be in Chrome inspector) if there is no valid icon, so, that means you probably aren't inputting the right icon name
• KaoriYui: Hi i just got it, there was an error displaying the icon what i did was fix it and the link work properly, thanks again!

Answer 2

$("#id").on("click",function(ev){
 ev.preventDefault();
 $("body").append('<a href="#"><i class="fa fa-list"></i></a>');
})

Answer 3

$('#main').after().append('<a href="#"><i class="fa fa-list"></i></a>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<div id="main">
</div>