哪吒面板添加其它信息代码

哪吒面板添加其它信息代码，两种方式中的小鸡多少都可以自由增减，要举一反三。
样式一：

<script>
window.onload = function() {
    const affLinks = {
        1: { price: '⏰2024.10.16；💰9.5$/年'},
        2: { price: '⏰2024.1.29；💰7￥/年'},
        3: { price: '⏰2025.6.5；💰8.8$/年'},
        4: { price: '⏰2024.1.8；💰7￥/年'},
        5: { price: '⏰2025.8.19；💰4.99￥/月'}

    };

    const createPriceTag = (price) => {
        if (!price) return null; 
        const $priceTag = document.createElement('span');
        $priceTag.setAttribute('style', 'background-color: rgba(30, 144, 255, 0.8); color: white; padding: 3px 6px; border-radius: 5px; margin-left: 5px;');
        $priceTag.textContent = price;
        return $priceTag;
    };

    const uiCards = document.querySelectorAll('.ui.card');
    uiCards.forEach((card) => {
        let cardId = card.id;

        if (cardId && affLinks[cardId]) {
            let $aLinkBox = document.createElement('div');
            $aLinkBox.setAttribute('style', 'position: absolute; bottom: 8px; right: 10px; display: flex; align-items: center;');

            let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null);
            if ($priceTag) {
                $aLinkBox.appendChild($priceTag);
            }
            
            card.appendChild($aLinkBox);
        }
    });
};
</script>

样式二

<script>
window.onload = function(){

    const extraData = {
        1: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        2: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        3: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        4: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'},
        5: {pid: 23,shop: 'CC',price: ' 💰9.5$ / 年',cycle: '⏰续期:',start: '10/16/2023',expire: '10/16/2024', expire1: '2024.10.16；'} 
    }
    const cats = document.querySelectorAll('.ui.accordion');
    cats.forEach((e, i)=>{
        let $catsTitle = e.querySelector('.title');
        let ct = $catsTitle.innerText;
        ct = ct.trim(); 

        let $itemCard = e.querySelectorAll('.ui.card');
        let uiCardCount = $itemCard.length;
        $catsTitle.innerHTML = $catsTitle.innerHTML.replace(ct, ct+ ' ('+ uiCardCount +')');
        $itemCard.forEach((ee, ii)=>{
            let $content = ee.querySelector('.content');
            let $descriptionGrid = ee.querySelector('.description .ui.grid');
            let $itemTitle = $content.querySelector('.header');
            let id = ee.getAttribute('id');
            if(extraData[id]){
                let pid = extraData[id].pid;
                pid = parseInt(pid);
                let shop = extraData[id].shop;
                let price = extraData[id].price;
                let start = extraData[id].start;
                let expire = extraData[id].expire;
                let expire1 = extraData[id].expire1;
                let cycle = extraData[id].cycle;

                if(price){
                    let $priceL = document.createElement('div');
                    $priceL.setAttribute('class', 'three wide column');
                    $priceL.innerHTML = '其它';
                    $descriptionGrid.insertBefore($priceL, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3]);
                    let $priceR = document.createElement('div');
                    $priceR.setAttribute('class', 'thirteen wide column');
                    $priceR.innerHTML = '<div class="ui blue label">'+cycle+ expire1 +price +'</a></div>';
                    $descriptionGrid.insertBefore($priceR, $descriptionGrid.childNodes[$descriptionGrid.childNodes.length-3])
                }

            }
        });
    });
}
</script>