如何通过文本输入向方括号包裹的data属性数组插入新值并保留格式

原代码直接对字符串做无规则拼接，完全没有按照JSON结构处理数组数据，才会出现格式错乱：

• 代码中引用了未定义的dataHome变量，本身存在运行报错的风险
• 读取data-home属性后没有把类数组字符串解析为可操作的JS数组，直接硬拼文本导致原格式的方括号、双引号被浏览器在属性赋值时自动转义剥离
• 没有处理数组元素之间的逗号分隔，才会出现原有最后一个元素和新值无分隔拼在一起，形成30100的结果
• 没有对输入值做非空校验，容易往数组里插入无效空值

按照「读属性→解析结构→追加值→序列化写回」的逻辑处理，不用手动拼接字符串，所有格式由JSON原生方法自动生成，完全匹配要求的格式：

$('.update_home_timeline').on('click', function () {
    // 获取输入框内容，去除首尾空格
    const newInput = $(this).prev().val().trim();
    // 空值直接跳过，避免无效插入
    if (!newInput) return;

    const $homeTeam = $('.home_team');
    // 读取原有属性值，解析为JS数组
    const originalArr = JSON.parse($homeTeam.attr('data-home'));
    // 追加新值到数组末尾
    originalArr.push(newInput);
    // 把数组序列化为标准JSON字符串，写回data-home属性
    $homeTeam.attr('data-home', JSON.stringify(originalArr));
});

执行后点击按钮，比如输入100，最终生成的data-home属性会自动保持标准JSON数组格式：

data-home="["10","20","30","100"]"
全程不需要手动添加方括号、双引号，也不会出现元素错位拼接、格式丢失的问题。

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