我如何在 jquery 中附加一个 li 并添加一个 i 类？答案

【问题标题】：How do i append an li and add a i class in jquery?我如何在 jquery 中附加一个 li 并添加一个 i 类？
【发布时间】：2015-11-20 15:16:47
【问题描述】：

假设 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>

jQuery 代码：

$(.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>

【问题讨论】：

它总是一样的吗？如果是这种情况，你可以使用克隆
使用克隆jsfiddle.net/rpLzx1wj检查这个
@guradio 不灵活，如果我有不同的数据怎么办？
jsfiddle.net/4egq8v51/3
jQuery add class to certain elements的可能重复

标签： javascript jquery html

【解决方案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>

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

【讨论】：

@JackMoscovi  是一个自闭合标签，与 相同。  是一个非封闭标签，它不是正确的 HTML 语法。很可能，所有现代浏览器都会自行关闭此标签，但这不是一个好方法:)

【解决方案2】：

DEMO

使用.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>");
})

【讨论】：

如果我有不同的数据集怎么办？像 .text('Something1'), .text('Something 2') ，它基于 json 数据，每当有人点击按钮时，它都会根据相应的数据追加。
@JackMoscovi 如果您使用克隆，它将复制确切的 html
感谢您的帮助，这已经足够接近了，但是如何设置 'Something' 的值，因为它只是相同的重复

【解决方案5】：

这是你的代码

<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));
 }

【讨论】：

是的，它是一种不同的方法。它是这样工作的吗？
是一样的。 =
某事

这就是你想要的我猜<li><a href="#">Something</a></li>