我如何在 jquery 中附加 li 并添加 ai 类？

Question

假设 li 我想将li元素添加到ul id ，并将 li 值附加到另一个类 i

这是代码

<ul class="menu" id="addNotification">                       
     <li>
         <a href="#">
             <i class="fa fa-users text-aqua"></i> 
         </a>
     </li>                      
 </ul>

查询代码：

$(.button).click(e) {
    e.preventDefault();
    $('#addNotification').append($('<li>').text("Something"));
}

在我点击按钮之前

<ul>
  <li><a href="#"><i class="fa fa-users text-aqua"></i>Something</a></li>
</ul>

我点击按钮后

 <ul>
  <li><a href="#"><i class="fa fa-users text-aqua"></i>Something</a></li>
  <li>"Something"</li>
</ul>

我希望它是

<ul>
  <li><a href="#"><i class="fa fa-users text-aqua"></i>Something</a></li>
  <li><a href="#"><i class="fa fa-users text-aqua"></i>Something</a></li>
</ul>

Answer 1

因此，您可以创建元素并附加它们：

 var $iElement = $("<i/>").addClass('fa fa-users text-aqua'); var $aElement = $("<a/>").append($iElement).append("Something").attr('href', '#'); var $liElement = $("<li/>").append($aElement); $('#addNotification').append($liElement); // Just for code demonstration: $("body").append($("<div/>").text($("#addNotification").html()));

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="addNotification"> </div>

当然，这一切都可以在一行中完成，但绝对不会提高可读性和可支持性。 有时，更长的代码更好。

Answer 2

演示

使用.clone()

描述：创建匹配元素集的深层副本。

$('#btn').click(function(e){ 
    e.preventDefault();
    var clone = $('#addNotification').find('li').clone();

    $('#addNotification').append(clone);
})

使用.html();

$('#btn1').click(function(e){ 
    e.preventDefault();
    var click = $('#addNotification1').find('li').html();

    $('#addNotification1').append("<li>"+click+"</li>");
})

Answer 3

所以这是你的代码

<ul class="menu" id="addNotification">

 <li>
     <a href="#">
         <i class="fa fa-users text-aqua"></i> 
     </a>
 </li>

</ul>

在 jquery 中，您可以直接将li与其内容附加在一起。 并且使用on是在点击事件上使用的首选方式。

$(".button").on('click',function(e) {
    e.preventDefault();
    $('#addNotification').append('<li>Something</li>');
}

另一种方法是

$(".button").on('click',function(e) {
    e.preventDefault();
    var content = '<a href="#"><i class="fa fa-users text-aqua"></i>Something</a>';
    var data = $("<li/>").val(content);
   $('#addNotification').append($(data));
 }

Answer 4

尝试克隆第一个li以在每次单击按钮时附加

$('.button').click(function(){
    var liEle = $('#addNotification').find("li:eq(0)").clone();
    $('#addNotification').append(liEle);
});

Answer 5

只需将新文本放在i元素之后：（或先将其放入字符串中）

$('.button').on('click', function (e) {
    e.preventDefault();
    var newthing = $('<li><a href="#"><i class="fa fa-users text-aqua"></i></a></li>');
    newthing.find('i').after("Something2");
    $('#addNotification').append(newthing);
});

还有很多其他方式（在此处添加课程）：

$('.button').on('click', function (e) {
    e.preventDefault();
    var newthing = $('<li />').append('<a href="#"><i class="fa fa-users"></i></a>');
    newthing.find('i').addClass('text-green').after("Something4");
    $('#addNotification').append(newthing);
});