jqueryを使用して追加要素を追加する方法

Question

jqueryを使用して要素を作成する方法を尋ねます。以下のコードを使用してhrefを作成できます。

document.createElement("a"); 

どのようにして、正確に別の要素内に要素を作成できますか？

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

Answer 1

jQueryでappend関数を使用できます。

$("#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>

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>