JavaScript动态生成HTML元素并赋予唯一ID的教程-html教程-PHP中文网

JavaScript动态生成HTML元素并赋予唯一ID的教程

霞舞

发布： 2025-10-05 15:13:01

原创

314人浏览过

javascript动态生成html元素并赋予唯一id的教程

本教程旨在解决在JavaScript中动态生成HTML元素，并为其赋予唯一ID的问题。通过使用Date对象或更可靠的UUID生成方法，确保每次创建的元素都拥有独一无二的标识符，从而实现对特定元素的精准操作，例如删除。本文将提供详细的代码示例和注意事项，帮助开发者掌握这一实用技巧。

在Web开发中，经常需要在JavaScript中动态生成HTML元素，并将它们添加到页面中。当需要对这些动态生成的元素进行单独操作时，例如删除特定的元素，为每个元素赋予一个唯一的ID就显得至关重要。

使用Date对象生成简单唯一ID

一种简单的方法是使用Date对象来生成ID。虽然这种方法在短时间内可以保证唯一性，但如果快速连续生成多个元素，可能会出现重复的ID。

function displayInputIntro() {
  var submitbutton = document.getElementById('submitbutton');
  var intro = document.getElementById('Intro');
  var introNewSection = document.getElementById('intro-row');

  var uniqueID = new Date().getTime(); // 获取当前时间的毫秒数作为ID
  var newDiv = document.createElement('div');
  newDiv.className = 'col-lg-5 mb-lg-0 mb-4';
  newDiv.id = uniqueID;
  newDiv.innerHTML = '<a href="javascript:void(0);" onclick="deleteInputFunc(this.parentNode.id)">Remove Input</a>'; // 传递ID给删除函数

  introNewSection.appendChild(newDiv);
  submitbutton.style.display = '';
}

function deleteInputFunc(elementId) {
  var elementToRemove = document.getElementById(elementId);
  if (elementToRemove) {
    elementToRemove.parentNode.removeChild(elementToRemove);
  }
}

登录后复制

代码解释：

立即学习“Java免费学习笔记（深入）”；

new Date().getTime(): 获取当前时间的毫秒数，作为唯一ID。
document.createElement('div'): 创建一个新的div元素。
newDiv.className = 'col-lg-5 mb-lg-0 mb-4': 设置新div的class属性。
newDiv.id = uniqueID: 将生成的唯一ID赋值给新div的id属性。
newDiv.innerHTML = ...: 设置新div的innerHTML，包含一个删除链接，点击时调用deleteInputFunc函数，并将当前元素的ID传递给该函数。
introNewSection.appendChild(newDiv): 将新创建的div添加到introNewSection元素中。
deleteInputFunc(elementId): 删除指定ID的元素。

注意事项：

javascript:void(0); 用于阻止链接的默认行为，防止页面跳转。
this.parentNode.id 获取当前点击的 <a> 标签的父元素 (即 <div> ) 的 ID。
使用 appendChild 而不是直接修改 innerHTML 可以避免重新解析整个 HTML 字符串，提高性能。

使用UUID生成更可靠的唯一ID

为了获得更可靠的唯一ID，可以使用UUID（Universally Unique Identifier）。UUID是一种标准化的128位格式的ID，可以保证在极大的范围内唯一。

WeShop唯象

WeShop唯象是国内首款AI商拍工具，专注电商产品图片的智能生成。

113

查看详情

function generateUUID() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

function displayInputIntro() {
  var submitbutton = document.getElementById('submitbutton');
  var intro = document.getElementById('Intro');
  var introNewSection = document.getElementById('intro-row');

  var uniqueID = generateUUID(); // 生成UUID
  var newDiv = document.createElement('div');
  newDiv.className = 'col-lg-5 mb-lg-0 mb-4';
  newDiv.id = uniqueID;
  newDiv.innerHTML = '<a href="javascript:void(0);" onclick="deleteInputFunc(this.parentNode.id)">Remove Input</a>'; // 传递ID给删除函数

  introNewSection.appendChild(newDiv);
  submitbutton.style.display = '';
}

function deleteInputFunc(elementId) {
  var elementToRemove = document.getElementById(elementId);
  if (elementToRemove) {
    elementToRemove.parentNode.removeChild(elementToRemove);
  }
}

登录后复制

代码解释：

立即学习“Java免费学习笔记（深入）”；