如何读取动态创建的 dom 元素的属性？

Question

使用 for 循环，我正在创建一个 span 元素来保存我访问的列表元素的索引

# document.querySelectorAll();

然后将创建的 span 元素附加到列表的每个元素。 现在当我点击每个列表时，我想得到它的索引，它现在是 span 元素的 innerHTML

<li class="list">List one</li>
<li class="list">List two</li>

const list = document.querySelectorAll('list');
for (var i = 0; i < list.length; i++) {
  var ind = document.createElement('span');
  ind.setAttribute('class', 'index');
  ind.innerHTML = i;
  list[i].appendChild(ind);
  list[i].onclick = function() {
    var index = this.querySelector('index');
    console.log(index.innerHTML);
  }
}

我得到

TypeError：无法读取 null 的属性。