javascript - 如何优化 jQuery 追加序列？

Question

我有一系列 jQuery 附加，如下所示:

moveControls.append("<span>").find("span").last().addClass("absLeft").text("«");
moveControls.append("<span>").find("span").last().addClass("left").text(" ‹ ");
moveControls.append("<span>").find("span").last().addClass("right").text(" › ");
moveControls.append("<span>").find("span").last().addClass("absRight").text("»");

而且，把它写出来，看起来......困惑，或者令人费解。它工作得很好，但我想知道是否有什么我应该做的。也许是“附加到”，但我仍然需要构建 s。

我最大的问题在于追加 -> 查找我刚刚添加的元素 -> 获取最后一个元素 -> 添加类 + 文本。

我在我的代码中重复了几次，但作为一个新手，我只是想知道是否有更有效的方法来做到这一点。

如果这个问题太宽泛，我深表歉意。 Stackoverflow 新手，这一直是我关心的问题。

Answer 1

一种方法是

$('<span />', {'class': 'absLeft',text: '«'}).appendTo(moveControls);
$('<span />', {'class': 'left',text: ' ‹ '}).appendTo(moveControls);
$('<span />', {'class': 'right',text: ' › '}).appendTo(moveControls);
$('<span />', {'class': 'absRight',text: '»'}).appendTo(moveControls);

但是创建一个字符串并将其附加在末尾会更有效

var arrays = [];
arrays.push('<span class="absLeft">«</span>');
arrays.push('<span class="left"> ‹ </span>');
arrays.push('<span class="right"> › </span>');
arrays.push('<span class="absRight">»</span>');
moveControls.append(arrays.join(''))