在Jquery中传递属性到追加函数不工作

Passing Attributes to Append function in Jquery Not Working

本文关键字：追加 函数 工作 属性 Jquery      更新时间：2023-09-26

我试图将属性传递给jquery追加函数。它附加html，但不附加属性。控制台中也没有显示任何错误。Html代码:

    <li>First Item</li>
    <li>Second Item</li>
Javascript代码: 
    $('li').each(function(){
        $(this).append('<span></span>', {
            text: 'some text',
            class: 'someClass'
        })
    });

我想让HTML看起来像

 <li>First Item <span class="someClass">some text</span></li>
 <li>Second Item Item <span class="someClass">some text</span></li>

.append()是一个接受字符串参数或函数的方法.append("<p>A</p>", "<p>B</p>")或.append(function() {}); -所以你传递一个无效的对象作为参数。

代替，使用$("<HTMLTag>", {...options}) 创建新元素

$("li").each(function(){
  $("<span>", {
    class: "someClass", 
    text: " some text",
    appendTo: this,
  });
  
});
<ul>
  <li>First Item</li>
  <li>Second Item</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

试试这个:

$('li').each(function(){
        $('<span/>',{
            text: 'some text',
            class: 'someClass'
        }).appendTo(this);
});

你可以做

$(this).append('<span class="someClass">some text</span>');

append的第二个参数是(我引用jQuery文档):

一个或多个额外的DOM元素、元素数组、HTML字符串或jQuery对象，以插入到匹配元素集合中每个元素的末尾。

相关文章：