如何用jQuery创建带自定义ID的table并通过ID追加子标签？

没问题，我来帮你把这段代码梳理清楚，还能优化一下让它更易读、更可靠：

需求说明 #

你想要实现的是：根据dataHold（示例值为yahoo.com）判断是否已存在对应ID的表格，若不存在则将带该ID的表格追加到<body>中，之后再向表格内添加<tr>、<td>或<th>元素。

优化后的实现代码 #

我把你的代码做了可读性和性能上的优化，同时规避了一些潜在问题：

// 假设data是已定义的数据源，hold是存储已处理过的dataHold的数组
const dataHold = data[1].split("@")[1]; // 提取得到类似"yahoo.com"的值
const tableId = dataHold.replace(/\./g, "-"); // 将非法ID字符转为合法格式，比如"yahoo-com"

if (!hold.includes(dataHold)) {
    // 直接创建表格并获取对应的jQuery对象，同时追加到body
    const $targetTable = $(`<table id="${tableId}">
        <tr>
            <th>${dataHold}</th>
        </tr>
    </table>`).appendTo("body");
    
    // 无需再次通过ID查找，直接用已获取的jQuery对象追加内容
    $targetTable.append(`<tr>
        <td>这里填写你要添加的单元格内容...</td>
    </tr>`);
    
    // 将已处理的dataHold存入数组，避免重复创建表格
    hold.push(dataHold);
}

关键优化点和注意事项 #

• 模板字符串替代拼接：用ES6模板字符串（``）拼接HTML结构，比传统的字符串拼接更清晰，不会出现引号嵌套混乱的问题
• 直接复用jQuery对象：创建表格时直接返回对应的jQuery对象$targetTable，后续追加内容不用再通过$("#xxx")重新查找DOM，性能更优
• 合法ID处理：HTML规范中ID不能包含.这类特殊字符，所以我用replace(/\./g, "-")把.替换成-，避免潜在的DOM选择器问题
• 去重逻辑：确保同一个dataHold只会创建一次表格，避免重复添加

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