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之间我希望{{1}}会被打开，就像。

希望这需要一个小的调整。

Answer 1

您也应该通过DOM设置$users = User::with('roles') ->whereHas('roles', function ($query) { return $query->wherePivot('admin', 1); }) ->where('active', 1) ->get();属性：

<li>

Answer 2

您可以直接在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)
}

我复制了列表项元素而不确定如何更正

2 个答案: