william ganrot william ganrot - 2 months ago 14
HTML Question

On deep water. add a div with js in a php printed line

Maybe I'm way off, but here we go.

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


This line print links to articles from a database. The class "flodet" just style the link. What I want to do is to create another div inside the class "flodet". I have tried to do this with these couple of lines of javascript.

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

}


Am I way off or am I on the right track?

L J L J
Answer

Here is a snippet to play around with.

Few suggestions:

  • '<li '.$class.'> - this seems to be wrong ; use the attribute class
  • You could select the li using ul > li if needed and can avoid setting class to each li; You could even decorate the parent ul with a class and select the li's using ul.myList li where myList is the class of 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>