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>
Add a comment
|
3 Answers
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>4 Comments
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 nameKaoriYui
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!
$("#id").on("click",function(ev){
ev.preventDefault();
$("body").append('<a href="#"><i class="fa fa-list"></i></a>');
})
Comments
$('#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>