Javascript 当通过jQuery创建新的DOM元素时，为什么要向它们添加空样式属性？

每当用户单击特定按钮时，我都会通过jQuery创建

元素并将其附加到DOM中。但是，一旦将它们添加到DOM中，它们就会显示为

，而不是

。为什么会这样

我明白，从视觉上看，这不会造成问题。但是，当试图在数组中查找特定元素的索引时，它确实会导致问题

添加

元素的函数：

函数addNewTask（输入）{
让用户输入；
用户输入=输入；
让task='
'+userInput+'x
'；
//父项=$（'.task list'）；
$（'.task list'）.append（task）.children（':last'）.hide（）.fadeIn（250）；
arr.push（任务）；
setItem（'items'，JSON.stringify（arr））；
控制台日志（arr）；
}

尝试查找DOM元素数组索引的函数（当前未按预期工作-无法按指定值查找索引）：

HTML预期输出：

<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>

---

这是因为您使用了

hide（）.fadeIn（250）

。这些方法在受影响的元素上设置内联

display

和

opacity

CSS规则。转换完成后，将删除规则，但保留空的

style

属性

如果在单击按钮添加新的

li

元素之前检查现有的

li

元素，则可以在下面的代码段中看到这种情况：

函数addNewTask（输入）{
让task='
'+input+'x
'；
$（'.task list'）.append（task）.children（':last'）.hide（）.fadeIn（250）；
}
$（“按钮”）。单击（函数（）{
addNewTask（“foobar”）；
});


福

添加
可能是因为
.hide（）
和
.fadeIn（）
添加和删除样式“但是，当试图在数组中查找特定元素的索引时，它确实会导致问题。”-为什么/如何？您实际上并不是为了这些目的而比较HTML代码…？最初您的问题只是要求澄清。现在，您的编辑意味着这是一个X/Y问题，因为
style
属性会以某种方式影响其他逻辑，而它不应该影响其他逻辑。因此，请在问题中添加代码，演示在数组中查找元素索引的问题。这似乎解决了我的问题。我不知道这些方法在完成执行后会留下一个空的
style
属性。非常感谢你！
<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>

<li style=""><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>

function addNewTask(input) {
    let userInput;

    userInput = input;

    let task = '<li><span class="text-task">' + userInput + '</span><span class="delete-task">x</span></li>';
    arr.push(task);

    //parent = $('.task-list');
    $('.task-list').append(task).children(':last').hide().fadeIn(250, function() {
        console.log(this);
        $(this).removeAttr('style');

        localStorage.setItem('items', JSON.stringify(arr));
        console.log(arr);
    });

}