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>

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>

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

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

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

尝试克隆第一个@Autowired private NamedParameterJdbcTemplate template;以附加每个按钮点击

li

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

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

5 个答案: