将元素添加到另一个元素

Question

我有这样的ul li：

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

我想在li元素中添加一个图标，如下所示：

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

我如何用jQuery做到这一点？

Answer 1

在.js文件中使用以下代码

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

Answer 2

prepend()方法将指定的内容作为jQuery集合中每个元素的第一个子元素插入（要将其作为最后一个子元素插入，请使用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>