动态创建HTML元素与关联对象：如何获取指定元素属性

我来帮你搞定这两个问题，咱们一步步拆解：

问题1：将ele_info中的info存入main_info #

首先得修正你代码里的一个小问题：你定义的element是字符串，不是实际的DOM元素，直接调用element.classList会报错。咱们先解决这个问题，再处理存储逻辑。

你可以把main_info定义为数组（因为要存储多个元素的信息，数组按顺序存储更方便后续按位置访问），然后在ele_info里把创建好的info对象push进去就行。看修正后的代码：

// 初始化为数组，用来按顺序存储每个动态元素的信息
var main_info = [];

$("button").on("click", function(){
  // 定义元素字符串
  var elementStr = '<div class="class1 class2 class3 class4"></div>';
  // 把字符串转成jQuery对象，方便后续操作DOM
  var $element = $(elementStr);
  // 追加到body
  $("body").append($element);
  // 传入实际的DOM元素给ele_info
  ele_info($element[0]);
  
  function ele_info(element){
    var info = {};
    // 把classList转成数组（DOMTokenList转数组更易操作）
    info.class_arr = Array.from(element.classList);
    // 可选：存储元素本身，方便后续关联DOM和信息
    info.element = element;
    // 将info存入main_info数组
    main_info.push(info);
  }
});

这样每次点击按钮，新元素的info就会被添加到main_info数组里，顺序和元素添加的顺序完全一致。

问题2：访问第3个动态元素的对应对象属性 #

因为main_info是按元素添加顺序存储的数组，索引从0开始，所以第3个元素对应的数组索引是2（第一次点击是索引0，第二次1，第三次2）。

方式1：直接通过数组索引访问 #

如果只需要获取第3个元素的信息，直接用main_info[2]就能拿到对应的info对象，比如：

// 访问第3个元素的类名数组
console.log(main_info[2].class_arr);

方式2：关联DOM元素与对应信息 #

如果你需要先找到页面上的第3个元素，再获取它的信息，可以给每个动态元素添加一个唯一标识（比如data-index属性），绑定它在main_info中的索引：

修改创建元素的逻辑：

$("button").on("click", function(){
  var elementStr = '<div class="class1 class2 class3 class4"></div>';
  var $element = $(elementStr);
  // 设置data-index，值为当前main_info的长度（也就是即将存入的索引）
  $element.attr('data-index', main_info.length);
  $("body").append($element);
  ele_info($element[0]);
  
  // ... 其余ele_info函数不变
});

之后要找到第3个元素并获取信息：

// 用jQuery的eq()选择器找到第3个元素（索引从0开始，eq(2)就是第3个）
var $thirdElement = $("div.class1").eq(2);
// 获取它的data-index值
var elementIndex = $thirdElement.data('index');
// 从main_info中拿到对应的信息对象
var thirdElementInfo = main_info[elementIndex];
// 访问属性
console.log(thirdElementInfo.class_arr);

这样不管元素顺序有没有变化（比如删除了前面的元素），都能通过data-index准确找到对应的信息对象。

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