javascript - 如何在 jQuery 中构造一个新的 HTML 元素？

Question

我有一些与此类似的代码:

var glyph = isApple ? '<span class="glyphicon glyphicon-apple"></span>' : '<span class="glyphicon glyphicon-banana"></span>';
var newFruit = '<li class="list-group-item">' + glyph + '<span class="badge">' + score + '</span>' + name + '</li>'
$('#fruitList').append(newFruit);

只是大量难以阅读和理解的粗俗串联。有没有办法在功能上创建这些元素，如果可以，如何创建？另外，我很好奇这样做的速度，因为如果它比我正在做的慢得多，那么我就不会打扰。

我正在寻找这样的东西，例如:

var newElement = li().class("list-group-item").value(name);
newElement.span().class(isApple ? "glyphicon glyphicon-apple" : "glyphicon glyphicon-user");
newElement.span().class('badge').value(score);
$('#fruitList').append(newElement);

现在显然上面的内容不好，甚至可能是正确的，但希望它能传达这个想法。基本上是一种链接函数来创建新元素的方法，避免了创建要插入的自定义 HTML 时出现的困惑连接。

Answer 1

类似这样的吗？

$('<li>', {
        html: $('<a>', {
             href: item.href,
             text: item.title
        })
    });

这会将 a 标签放入 li 标签内。您可以根据需要修改此内容