js 动态生成的id怎么赋值

在JavaScript中，动态生成ID并赋值通常涉及到以下几个步骤：

基础概念

动态ID：ID是在运行时生成的，而不是在编写代码时硬编码的。
赋值：将生成的ID分配给某个元素或变量。

优势

唯一性：动态生成的ID可以确保在页面上每个元素都有唯一的标识符。
灵活性：可以根据不同的条件或数据生成不同的ID。

类型

随机ID：通过随机数生成ID。
时间戳ID：基于当前时间生成ID。
UUID：使用通用唯一识别码（UUID）生成ID。

应用场景

DOM操作：在动态创建元素时为其分配ID。
事件绑定：为动态生成的元素绑定事件处理程序。
数据存储：将数据与特定元素关联时使用。

示例代码

随机ID生成并赋值

function generateRandomId(length) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    let result = '';
    const charactersLength = characters.length;
    for ( let i = 0; i < length; i++ ) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
}

const dynamicElement = document.createElement('div');
dynamicElement.id = generateRandomId(10); // 生成一个长度为10的随机ID
document.body.appendChild(dynamicElement);

时间戳ID生成并赋值

function generateTimestampId() {
    return 'id_' + new Date().getTime();
}

const dynamicElement = document.createElement('div');
dynamicElement.id = generateTimestampId(); // 生成基于时间戳的ID
document.body.appendChild(dynamicElement);

UUID生成并赋值

function generateUUID() { // Public Domain/MIT
    let d = new Date().getTime();//Timestamp
    let d2 = (performance && performance.now && (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        let r = Math.random() * 16;//random number between 0 and 16
        if(d > 0){
            r = (d + r)%16 | 0;
            d = Math.floor(d/16);
        } else {
            r = (d2 + r)%16 | 0;
            d2 = Math.floor(d2/16);
        }
        return (c==='x' ? r : (r&0x3|0x8)).toString(16);
    });
}

const dynamicElement = document.createElement('div');
dynamicElement.id = generateUUID(); // 生成UUID
document.body.appendChild(dynamicElement);