javascript - 将元素添加到另一个元素

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

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>