如何用JavaScript在HTML中动态展示逗号分隔字符串（兼容HTMLFiddle）

原代码存在两个问题：一是硬编码数组索引只能处理固定数量的分隔值，二是在HTMLFiddle中可能因模板字符串的格式问题导致显示空白。以下是两种兼容的实现方案，均可动态处理任意数量的逗号分隔值：

方式1：用<p>标签逐行显示 #

<!DOCTYPE html>
<html>
<head>
    <title>Test Split String</title>
</head>
<body>
    <div id="output"></div>

    <script>
        const testString = "Apple,Banana,Cherry,Date,Elderberry";
        const parts = testString.split(',');
        const outputDiv = document.getElementById('output');
        
        // 遍历拆分后的数组，逐个创建p元素并添加到容器
        parts.forEach(part => {
            const p = document.createElement('p');
            p.textContent = part;
            outputDiv.appendChild(p);
        });
    </script>
</body>
</html>

这种方式通过DOM API动态创建元素，完全避免了模板字符串的格式兼容问题，能自适应处理任意数量的分隔值，在HTMLFiddle中可正常运行。

方式2：用表格规整显示每行内容 #

<!DOCTYPE html>
<html>
<head>
    <title>Test Split String Table</title>
    <style>
        table { border-collapse: collapse; margin-top: 10px; }
        td { border: 1px solid #ccc; padding: 8px; }
    </style>
</head>
<body>
    <table id="outputTable"></table>

    <script>
        const testString = "Apple,Banana,Cherry,Date,Elderberry";
        const parts = testString.split(',');
        const table = document.getElementById('outputTable');
        
        // 遍历数组，为每个值创建表格行和单元格
        parts.forEach(part => {
            const row = document.createElement('tr');
            const cell = document.createElement('td');
            cell.textContent = part;
            row.appendChild(cell);
            table.appendChild(row);
        });
    </script>
</body>
</html>

如果需要更规整的布局，表格是合适的选择，同样采用DOM动态创建元素的方式，稳定性和兼容性更强。

原代码空白原因说明 #

HTMLFiddle对多行模板字符串的解析可能存在兼容问题，模板中的缩进和换行会被解析为大量空白字符，导致内容被挤出可视区域。改用createElement+appendChild的原生DOM操作，完全不受字符串格式影响，是更可靠的实现方式。

内容的提问来源于stack exchange，提问作者gbougie