Почему рендер узла в DOM дереве происходит только после перезагрузки страницы?

Реализованный функционал:

При выборе авто из select и клику по кнопке "Добавить", рендерится карточка с авто. Суть в свойстве объекта Cruise, если Cruise === 1, когда checkbox === checked, то в карточке рендерится данный узел:

carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));

из функции addCruiseToRenderCarCart.

При Cruise === 0, соответственно узел "Круговой тариф" не будет рендерится в карточке авто. Данный функционал отрабатывает!

Так же я сделал фиктивный запрос с сервера в функции fetchVehicleData, с помощью которого, при клике по checkbox я получаю в панели "Тип транспорта" с сервера данные авто (которые сохранены у юзера в личном кабинете), которое юзер так же может отрендерить при клике по добавленным данным. При таком сценарии, с сервера в любом случае приходит Cruise === 1, и узел:

carCruiseTxt.appendChild(document.createTextNode("Круговой тариф"));

должен рендерится в карточке, но на данный момент узел не рендерится при первом добавлении, а рендерится в карточке уже после перезагрузки страницы. Я как смог вытащил и склеил куски кода с 3 модулей, где происходят все операции и реализовал сценарий событий. Ссылки на песочницы:

https://jsfiddle.net/6z8hfu4a/19/

https://codepen.io/Andy41/pen/mdvwGbY?editors=1111

Из того что я понял, по какой то причине, если добавлять с помощью функции getCarListAll то код не находит carCruiseContainer, хотя в DOM дереве devtools, он присутствует.


В двух словах нужно нажать на checkbox, а потом по добавленному тексту данных авто, что имеется на скриншоте:

введите сюда описание изображения

Рендерится карточка с авто:

введите сюда описание изображения

Та же карточка после перезагрузки страницы (Появился "Круговой тариф", хотя должен был появиться до перезагрузки страницы):

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Andrew Koshman

Задача решена, оказывается вместо реализации данной функции: addCruiseToRenderCarCart,

можно всего лишь, в шаблоне функции renderCars() описать тернарник:

<div class="car__cruise">${car.Cruise === 1 ? 'круговой тариф' : ''}
→ Ссылка