CODEWITHSUNDEEP
javascriptjqueryhtml
Majid Ghafoorzade
Majid Ghafoorzade

Reputation: 498

Add element to another element

I have a ul li like this:

<ul class="NavMenu">
    <li>Hello</li>
</ul>

I want to add an icon in li element like this:

<ul class="NavMenu">
    <li><i class="myIcon"></i>Hello</li>
</ul>

How i can do this with jQuery?

Upvotes: 0

Views: 70

Answers (2)

Prashant Chitti
Prashant Chitti

Reputation: 16

Use the following code in your .js file

$(document).ready(function(){ $('.NavMenu li').prepend("<i class='myIcon'></i>"); });

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

The prepend() method inserts the specified content as the first child of each element in the jQuery collection (To insert it as the last child, use append()).

$(".NavMenu li").prepend($("<i/>",{class:"myIcon",html:"&#x2661;"}));
console.log($(".NavMenu").html());
.NavMenu li{list-style: none;}
.myIcon{color:red;padding-right:5px;font-size:20px;font-style: normal;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="NavMenu">
    <li>Hello</li>
</ul>

Upvotes: 1

Related Questions