Javascript 如何切换insertBefore或InsertAfter？

我有一个标签按钮。带有向上箭头和下方的文本。当您单击选项卡时。网站的标题被隐藏，箭头图标倒置

我还希望箭头改变它在html中的位置

我可以通过使用以下脚本很好地完成这一点：

<script>    
    $('.contentTab').on('click', function(e) {
      $('.mainContent').toggleClass("closeHeader");
      $('.triangle-up').toggleClass("triangle-down");
      $(".triangle-down").insertAfter(".contentTab h1")
      e.preventDefault();
    });
</script>

$（'.contentTab'）。在（'click'，函数（e）{
$（'.mainContent'）.toggleClass（“closeHeader”）；
$（'.triangle up'）.toggleClass（“triangle down”）；
$（“.triangle down”）.insertAfter（“.contentTab h1”）
e、 预防默认值（）；
});

//

我的问题是：如何切换此功能。因此，如果再次单击contentTab。箭头将恢复到原来的位置。我是否创建一个if语句？我是新来的JS

---

谢谢

由于要在元素上切换一个类，如果没有

.triangle down

类，只需使用来选择

.triangle up

：

$('.contentTab').on('click', function(e) {
  $('.mainContent').toggleClass("closeHeader");
  $('.triangle-up').toggleClass("triangle-down");

  if(!$('.triangle-up').hasClass("triangle-down")){
      $(".triangle-down").insertAfter(".contentTab h1");
  }else{
      // put it back wherever it was before
      $(".triangle-down").insertAfter(...where ever it was before..);
  }
  e.preventDefault();
});

完整代码段：

$（'.contentTab'）。在（'click'，函数（e）上{
$（'.mainContent'）.toggleClass（“closeHeader”）；
$（'.triangle up'）.toggleClass（“triangle down”）；
$（“.triangle down”）.insertAfter（“.contentTab h1”）；
$（“.triangle-up:not（.triangle-down）”）.insertBefore（“.contentTab h1”）；
e、 预防默认值（）；
});
h1{
显示：内联块；
}
.三角下降{
颜色：#f00；
显示：内联块；
变换：旋转（180度）；
}

▲
内容选项卡标题

$（'.contentTab'）。在（'click'，函数（e）{
$（'.mainContent'）.toggleClass（“closeHeader”）；
if（$（'.mainContent'）.hasClass（“closeHeader”））{
$（'.triangle up'）.hide（）；
$（“.triangle down”）.show（）；
}否则{
$（'.triangle up'）.show（）；
$（“.triangle down”）.hide（）；
}
e、 预防默认值（）；
});

假设
.triangle up
和
.triangle down
是两个元素。
为什么首先需要移动元素？通常情况下，css类和样式规则会处理所需的一切，因为将其移动到下面的元素下的唯一方法是将其设置为绝对位置，并要求我将元素重新居中。这样我就不必把事情搞得一团糟了。乔希回答得很好。如果你发布更多的代码或者做一些小动作，这样人们就不必猜测你在做什么，那就更好了。。但是你不知道在
之前.contentTab h1
是原始位置。@Pamblam OP没有声明初始位置。我只是举个例子。
$(".triangle-down").insertAfter(".contentTab h1");
$(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");

<script>    
    $('.contentTab').on('click', function(e) {
        $('.mainContent').toggleClass("closeHeader");
        if ($('.mainContent').hasClass("closeHeader")){
            $('.triangle-up').hide();
            $(".triangle-down").show();
        }else {
            $('.triangle-up').show();
            $(".triangle-down").hide();
        }
        e.preventDefault();
    });
</script>