使用 JavaScript 动态创建元素时，它在某些元素中显示重复文本

Question

我在使用 Javascript 创建动态元素时遇到了一个奇怪的问题，有些文本渲染了两次我不知道为什么会这样

这是我使用 javascript 创建时得到的输出请查看此屏幕截图 link https://i.ibb.co/dP3BqrT/current-output.png

我期待这样的输出，请查看附件中的屏幕截图link https://i.ibb.co/rvPGt5d/expected-output.png

这里是码笔link https://codepen.io/motailab/pen/JjpMyBd

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        .basic-table,
        .atomic-table {
            width: 300px;
            margin: 0 auto;
        }

        .atomic-table {
            width: 800px;
        }

        .basic-table .header {
            font-weight: bold;
            border-bottom: 4px solid #000;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            padding: 4px;
            margin-top: 10px;
        }

        .basic-table .basic-group {
            border: 1px solid gray;
            padding: 4px;
        }

        .basic-table .spacer {
            display: block;
            width: 100%;
            height: 14px;
        }

        .basic-table .total {
            padding: 4px;
            background: #E2EAEB;
            border: 1px solid gray;
        }

        .atomic-table .heading {
            border-bottom: 4px solid #000;
            font-weight: bold;
            padding: 10px 5px;

        }

        .atomic-total,
        .atomic-row {
            display: flex;
            justify-content: space-between;
        }

        .atomic-total .atomic-col,
        .atomic-row .atomic-col {
            width: 100%;
            text-align: right;
            padding: 5px;
            border: 1px solid rgba(170, 169, 169, 0.651);
            border-left: 0;
            border-top: 0;
            border-bottom: 0;
            box-sizing: border-box;
        }

        .atomic-total .atomic-col:first-child,
        .atomic-row .atomic-col:first-child {
            text-align: left;
        }

        .rowlabelc {
            font-weight: bold;
        }

        .highlightc {
            background: #E2EAEB;
            font-weight: bold;
        }

        .atomic-spacer {
            height: 10px;
        }

        .atomic-col.spacerc {
            border: 0;
            width: 8px;
            border-right: 1px solid rgba(170, 169, 169, 0.651);
            min-width: 6px;
        }

        .atomic-row-group .atomic-row:last-child .rowlabelc,
        .atomic-row-group .atomic-row:last-child .basicc {
            border-bottom: 1px solid rgba(170, 169, 169, 0.651);
        }

        .atomic-row-group .atomic-row:first-child .rowlabelc,
        .atomic-row-group .atomic-row:first-child .basicc {
            border-top: 1px solid rgba(170, 169, 169, 0.651);
        }

        .atomic-row-group .atomic-total:last-child .rowlabelc,
        .atomic-row-group .atomic-total:last-child .basicc {
            border-bottom: 1px solid rgba(170, 169, 169, 0.651);
            border-top: 1px solid rgba(170, 169, 169, 0.651);
        }

        .atomic-spacer .atomic-col.highlightc {
            background-color: #fff;
            border-right-color: transparent;
        }

        .atomic-row-group .atomic-row:last-child .highlightc {
            border-bottom: 1px solid rgba(170, 169, 169, 0.651);
        }

        .atomic-row-group .atomic-row:first-child .highlightc {
            border-top: 1px solid rgba(170, 169, 169, 0.651);
        }

        .atomic-total {
            background: #E2EAEB;
        }

        .atomic-total .spacerc {
            background: #fff;
        }

        .border-right-transparent {
            border-right-color: transparent !important;
        }
    </style>
</head>

<body>
    <div class="atomic-table">
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", () => {

            const rows = ['header', 'basic', 'basic', 'basic', 'spacer', 'total', 'spacer', 'basic', 'basic', 'header', 'total'];
            const columns = ['rowlabelc', 'basicc', 'basicc', 'spacerc', 'highlightc'];
    
            function checkNextColumn(columns, i) {
                try {
                    if ((columns[i] !== 'spacerc' && columns[i + 1] !== 'spacerc' && columns[i] !== 'highlightc' && columns[i + 1] !== 'highlight') && (columns[i] === 'rowlabelc' || columns[i] === 'basicc')) {
                        return 'border-right-transparent';
                    } else {
                        return null;
                    }
                } catch (error) {
                    return null
                }
            }

            function groupByRows(rows = []) {
                const groups = [];
                for (let i = 0; i < rows.length; i++) {
                    if (i === 0) {
                        groups.push([rows[i]]);
                    } else {
                        if (rows[i] === rows[i - 1]) {
                            groups[groups.length - 1].push(rows[i]);
                        } else {
                            groups.push([rows[i]]);
                        }
                    }
                }
    
                return groups;
            }
    
    
            function createTables(rows, columns) {
                const atomicTable = document.querySelector('.atomic-table');
                const groups = groupByRows(rows);
                console.log(groups);
                for (const group of groups) {
                    if (group.length > 1) {
                        const atomicRowGroup = document.createElement('div');
                        atomicRowGroup.classList.add('atomic-row-group');
                        for (const row of group) {
                            const atomicRow = createRow(row, columns);
                            atomicRowGroup.appendChild(atomicRow);
                        }
                        atomicTable.appendChild(atomicRowGroup);
                    } else {
                        const atomicRow = createRow(group[0], columns, true);
                        atomicTable.appendChild(atomicRow);
                    }
                }
            }
    

            function createRow(row, columns, wrap=false) {
                const atomicRow = document.createElement('div');
                if (row === 'header') {
                    atomicRow.classList.add('heading');
                    atomicRow.textContent = 'Heading';
                    return atomicRow;
                } else if (row === 'total') {
                    atomicRow.classList.add(...['atomic-total', 'atomic-row']);
                } else if (row === 'spacer') {
                    atomicRow.classList.add(...['atomic-spacer', 'atomic-row']);
                } else if (row === 'basic') {
                    atomicRow.classList.add('atomic-row');
                }

                for (let i = 0; i < columns.length; i++) {
                    const atomicCol = document.createElement('div');
                    if (columns[i] === 'rowlabelc') {
                        atomicCol.classList.add(...['atomic-col', 'rowlabelc', row === 'spacer' ? checkNextColumn(columns, i) : null]);
                        atomicCol.innerHTML = 'foo';
                    } else if (columns[i] === 'basicc') {
                        atomicCol.classList.add(...['atomic-col', 'basicc', row === 'spacer' ? checkNextColumn(columns, i) : null]);
                        atomicCol.innerHTML = '10';
                    } else if (columns[i] === 'spacerc') {
                        atomicCol.classList.add(...['atomic-col', 'spacerc']);
                    } else if (columns[i] === 'highlightc') {
                        atomicCol.classList.add(...['atomic-col', 'highlightc']);
                        atomicCol.innerHTML = '10';
                    }
                    atomicRow.appendChild(atomicCol);
                }

                if ((row === "total" || row === "basic") && wrap) {
                    const atomicRowGroup = document.createElement('div');
                    atomicRowGroup.classList.add('atomic-row-group');
                    atomicRowGroup.appendChild(atomicRow);
                    return atomicRowGroup;
                }
                return atomicRow;
            }

            createTables(rows, columns);
        });
    </script>
</body>

</html>

Answer 1

if(row === "spacer") {
   atomicCol.innerHTML = '';
}

在atomicRow.appendChild(atomicCol);

之前只需要以上

使用 JavaScript 动态创建元素时，它在某些元素中显示重复文本

when creating element dynamically with JavaScript, it's showing duplicate text in some element

html

javascript

dom