javascript - 如何使用 JavaScript DOM 元素编写更少的代码？

Question

简介：我正在使用 fetch 方法从API. 在 forloop 我没有使用模板字符串，因为有人告诉我。这不是在模板字符串中编写 HTML 代码的好方法。所以这就是为什么我使用 javascript DOM 元素来渲染数据API。但我是 JavaScript 新手，我想知道如何使用 DOM Element 编写更少的代码。下面的代码太多太复杂了。我在pending-salediv 中有下拉菜单，其中包含表单属性。我还没有写，如果我写那个下拉菜单代码，我的代码在我写代码时会更加复杂..

需求：我只是想知道如何才能编写更少且易于理解的代码？谁能告诉我我写的代码是否正确？如果这不是真的，请指导我一点...

如果有任何帮助，我将不胜感激。

main.js

const orderCard = document.querySelector('#pending-sales');

function pendingSaleBuild() {
    orderCard.innerHTML = ''
    fetch('/pending-sale-api/')
        .then((res) => res.json())
        .then((data) => {
            data.map(item => {
                // card title
                const colLg = document.createElement('div')
                colLg.classList.add('col-lg-12')
                const hPanel = document.createElement('div')
                hPanel.classList.add('hpanel')
                hPanel.classList.add('hyellow')
                const pBody = document.createElement('div')
                pBody.classList.add('panel-body')
                hPanel.appendChild(pBody)
                colLg.appendChild(hPanel)
                orderCard.appendChild(colLg)

                const h5 = document.createElement('h5');
                h5.classList.add('text-capitalize')

                // card tilte link
                const a = document.createElement('a');
                h5.appendChild(a)
                linkText = document.createTextNode(item.customers);
                a.appendChild(linkText);
                a.href = "#";
                pBody.appendChild(h5);

                // hr Element
                const hr = document.createElement('hr');
                pBody.appendChild(hr)

                // row div
                const rowDiv = document.createElement('div');
                rowDiv.classList.add('row');

                // project - label div
                const colDiv = document.createElement('div');
                colDiv.classList.add('col-sm-4');
                rowDiv.appendChild(colDiv);

                // project lable div
                const proLable = document.createElement('div');
                proLable.classList.add('project-label');
                proLable.innerText = 'Saler Name';
                colDiv.appendChild(proLable);

                // small text Element
                const smallEle1 = document.createElement('small')
                smallEle1.innerText = item.saler
                colDiv.appendChild(smallEle1);

                const colDiv2 = document.createElement('div');
                colDiv2.classList.add('col-sm-4');
                rowDiv.appendChild(colDiv2);
                // project lable div
                const proLable2 = document.createElement('div');
                proLable2.classList.add('project-label');
                proLable2.innerText = 'Timestamp';
                colDiv2.appendChild(proLable2);

                // small text Element
                const smallEle2 = document.createElement('small')
                smallEle2.innerText = 'item.created_on'
                colDiv2.appendChild(smallEle2);

                const colDiv3 = document.createElement('div');
                colDiv3.classList.add('col-sm-4');
                rowDiv.appendChild(colDiv3);
                // project lable div
                const proLable3 = document.createElement('div');
                proLable3.classList.add('project-label');
                proLable3.innerText = 'Total Price';
                colDiv3.appendChild(proLable3);

                // small text Element
                const smallEle3 = document.createElement('small')
                smallEle3.innerText = '$ 124547'
                colDiv3.appendChild(smallEle3);

                pBody.appendChild(rowDiv);
            })
        });
};

标签： javascript