javascript - 我正在复制列表项元素，但不知道如何更正

Question

我无意中在列表项中创建了列表项行。如(无内容):

<li>
<li></li>
</li>

我可以在代码中看到它，但不知道如何修复。首先是 html(非常基本):

<ul class="list-group scrolltest" id="albumdetails"></ul>

代码:

function collapsedSubFolder(subFolderDetails, index) {
  console.log(subFolderDetails)
  var details = document.querySelector('#albumdetails')
  var fragment = document.createDocumentFragment();
  var subFolderLength = Object.keys(subFolderDetails).length
  var subFolderFiles = Object.keys(subFolderDetails);
  var subFolderFilePaths = Object.values(subFolderDetails);
  for (var i = 0; i < subFolderLength; ++i) {
  var li = document.createElement('li');
  li.innerHTML = '<li class="list-group-item list-group-item-info" id="sfflist"><a class="collapsedclass" href=/album' + encodeURI(subFolderFilePaths[i]) + '>' + subFolderFiles[i] + '</a href></li>';
        fragment.appendChild(li);
      }
  //myDiv.appendChild(fragment);
  details.insertBefore(fragment, details.children[index+1]);

当我意识到发生了什么时 - 我从innerHTML中删除了开头和结尾的li，所以上面变成了 -

  li.innerHTML = 'class="list-group-item list-group-item-info" id="sfflist"><a class="collapsedclass" href=/album' + encodeURI(subFolderFilePaths[i]) + '>' + subFolderFiles[i] + '</a href>'

当然我发现li tags创建我的 innerHTML 时已关闭介于<li> </li>之间我希望li会被打开，就像。

希望这需要稍作调整。

Answer 1

例如，您可以直接在 li 对象上设置属性或属性

// setting properties
li.id = 'sfflist'
li.className = 'list-group-item list-group-item-info'
// or setting attributes
li.setAttribute('id', 'sfflist')

我会继续使用 DOM 方法而不是使用 innerHTML，例如

for (let i = 0; i < subFolderLength; i++) {
  let li = document.createElement('li');
  li.id = `sfflist${i}` // make it unique
  li.className = 'list-group-item list-group-item-info'

  let a = document.createElement('a')
  a.href = `/album${subFolderFilePaths[i]}`
  a.className = 'collapsedclass'
  a.appendChild(document.createTextNode(subFolderFiles[i]))

  li.appendChild(a)
  fragment.appendChild(li)
}