javascript - 在深水中。在php打印行中添加带有js的div

也许我走了，但是我们走了。

print '<li  '.$class.'><a id="flodet" href="index.php?artikelid='.$rad["id"].'">'.$rad["header"].'</a> </li>';

此行打印链接到数据库中的文章。类flodet只是设置链接的样式。我想做的是在类flodet中创建另一个div。我尝试用这几行javascript来做到这一点。

function myFunc() {
    var bild = document.createElement("div");
    document.getElementById('flodet').appendChild(bild);
}

我要离开还是走正确的道路？

最佳答案

这是一个片段。

几点建议：


'<li '.$class.'>-这似乎是错误的；使用属性class
您可以根据需要使用li选择ul > li，并且可以避免为每个li设置类。您甚至可以用ul装饰父class，然后使用li选择ul.myList li，其中myList是ul的类。

function myFunc() {
  /* To add a 'div' inside the list item anchor */
  /*
  var bild = document.createElement("div");
  bild.innerHTML = "My new DIV";
  document.getElementById('flodet').appendChild(bild);
  */

  /* To add a 'div' inside each list item */
  var listItems = document.querySelectorAll("ul > li");

  for (var i = 0; i < listItems.length; i++) {
    var bild = document.createElement("div");
    bild.innerHTML = "My Div" + i;
    /* Add an attribute, say 'class' */
    bild.setAttribute("class", "divClass");
    listItems[i].appendChild(bild);
  }
}

window.onload = myFunc;

/*  To select the list items */

ul > li {
  color: #DDD;
}

.divClass {
  border: 1px solid #F2F2F2;
}

<ul>
  <li>
    <a id="flodet" href="">Link 1</a>
  </li>
  <li>
    <a id="flodet2" href="">Link 2</a>
  </li>
  <li>
    <a id="flodet3" href="">Link 3</a>
  </li>
</ul>