Jquery изменение большого участка html кода

У меня есть 2 элемента, привилегии и звания, и для привилегий у меня есть свой html код, и при нажатии на звания, у меня скрываются привилегии (через toggle или hide, это я знаю как сделать) и появляются звания. И у меня вопрос, как мне вместо привилегий вставить большой участок кода html "званий"? Или лучше просто подключить другой html файл (если это возможно)

let select = $('.shop-content__body-select');
    select.on('click', function(){
        $('.shop-content__body-content').toggle();
    });

То есть к примеру вместо этого html:

<div class="shop-content__body-privilege">
    <div class="shop-content__body-privilege-price">
        <h2>Vip</h2>
        <span>40р</span>
        <span>150р</span>
    </div>
</div>

Вставлялся этот:

<div class="shop-content__body-privilege">
    <div class="shop-content__body-privilege-price">
        <h2>Что то другое</h2>
        <span>20р</span>
        <span>450р</span>
    </div>
</div>