javascript - 在div中如何从右到左追加元素？

Question

我的问题是，当我将一些图标附加到 div 时，它是从左到右附加的，但我如何才能从右到左附加这些图标。

代码:

$('.icons').empty();
if (data_arr[0] != ""){
            $('.icons').append('<i class="far fa-calendar icon"></i>&nbsp;&nbsp;');
        }
if (data_arr[1] != ""){
            $('.icons').append('<i class="fas fa-sort-numeric-up icon"></i></i>&nbsp;&nbsp;');
        }
if (data_arr[2] != ""){
            $('.icons').append('<i class="fas fa-truck icon"></i>&nbsp;&nbsp;');
        }
if (data_arr[3] != ""){
            $('.icons').append('<i class="fas fa-dharmachakra"></i>&nbsp;&nbsp;');
        }

如上图所示。从下拉列表中选择元素后，它会在 div 上方附加一个图标。我希望这些图标从右到左附加到 div 中。

编辑 1: 像这样。

Answer 1

你应该使用 .prepend() 而不是 .append()。

$('.icons').prepend('<i class="far fa-calendar icon"></i>&nbsp;&nbsp;');

还有 .after() 和 .before() jQuery 函数。

基于您的代码的完整示例(不使用 font-awesome):

<div class="icons"></div>

$(".icons").empty();

var data_arr = ['first', 'second', 'third', 'fourth'];

if (data_arr[0]) {
  $(".icons").prepend('<i class="icon">first</i>&nbsp;&nbsp;');
}
if (data_arr[1]) {
  $(".icons").prepend('<i class="icon">second</i>&nbsp;&nbsp;');
}
if (data_arr[2]) {
  $(".icons").prepend('<i class="icon">third</i>&nbsp;&nbsp;');
}
if (data_arr[3]) {
  $(".icons").prepend('<i class="icon">fourth</i>&nbsp;&nbsp;');
}

希望对您有所帮助!