Javascript 使用bootstrap/jquery动态添加选项卡/选项卡内容的更简洁的方法？

我目前正在动态添加选项卡，如下所示：

$('input[type="checkbox"]').on('click', function () {
    var hotel = $(this).is(':checked');
    if (hotel) {
        $('.nav-tabs').append('<li class="hotel"><a href="#hotel" data-toggle="tab">Hotel</a></li>');
        $('.tab-content').append('<div class="tab-pane hotel" id="hotel"><div>lol</div></div>');
    } else {
        $('.hotel').remove();
    }
});

但我认为这真的很混乱，因为我的JS中生成了很多html。这些选项卡基本上保存表单输入，因此我可以看到javascript很快变得混乱

---

我这样做是对的还是有更简单的方法呢？

如何将hotel选项卡添加到标记中，但默认情况下将其隐藏？添加显示：无；对于您的.hotel css类和javasript，如下所示：

$('input[type="checkbox"]').on('click', function () {
    var hotel = $(this).is(':checked');
    $('.hotel').toggle(hotel);
});

---

是的，我只是玩弄了“隐藏/显示”，没有考虑切换，这似乎很有效。但实际上，它只是隐藏元素，而不是完全删除它们，如果提交表单，即用户在填写了一些数据并提交了表单后决定退出酒店，这将是一件危险的事情anyway@a7omiton对我会在服务器端检查复选框的值。是的，我想你无论如何都会检查它们。谢谢你的谈话