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

Question

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?

On the right track. – Charles McKelvey Oct 01 '16 at 13:02 — Charles McKelvey, Oct 01 '16 at 13:02

L J · Accepted Answer · 2016-10-01T13:51:44.450

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>

Thank you, just one question. class only get added on the first item in the list. Any idea why that is? — WilliamG, Oct 01 '16 at 13:47
We could use it like `bild.setAttribute("class", "divClass");` to add an attribute to an element. `class only get added on the first item in the list` - is that in `PHP` code or `JavaScript`? — L J, Oct 01 '16 at 13:53

score 0 · Answer 2 · answered Oct 01 '16 at 13:05

0

You are most likely on the right track, but let me suggest one thing about your tiny code-piece:

I you are using styles to brush up the link, you are better of to set the class-attribute on the link rather than the id. ID's should be unique - That might not be the case, if there are more elements of this type generated by your code.

answered Oct 01 '16 at 13:05

0xDECAFBAD

627
1
8
21

but then this line wouldn't work? document.getElementById('flodet').appendChild(bild); – WilliamG Oct 01 '16 at 13:09
No, then your code would require some change. Depending on what you exactly want to achieve, you can probably set different IDs or identify your elements by using `data-XY` attributes on them. – 0xDECAFBAD Oct 01 '16 at 13:13

user2267175 · Answer 3 · 2016-10-01T13:34:05.157

-1

document.getElementById('flodet').insertAdjacentHTML("beforeend", "<div class='inline'> World!</div>");

.inline {
 display: inline-block; 
}

<div id="flodet">Hello </div>

looks okay, add it inside a document.ready or something simular and you should be good to go.

I would suggest one change though,

Instead of

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

i would just do

document.getElementById('flodet').insertAdjacentHTML("beforeend", "<div>Hello World!</div>");

edited Oct 01 '16 at 13:34

answered Oct 01 '16 at 13:11

user2267175

595
5
14

I think what you suggest is wrong. http://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode – jakub wrona Oct 01 '16 at 13:17
it works so it isn't wrong and it looks cleaner, the difference is minimal for a small / medium size website. – user2267175 Oct 01 '16 at 13:26
I didn't say it doesn't work, it's just worse, and he suggests the worse than the original better way from the author and that is wrong. – jakub wrona Oct 01 '16 at 13:28
Again, the difference is minimal, close to none. But i'll update it to insertAdjacentHTML if it makes you happy :) – user2267175 Oct 01 '16 at 13:30
with innerHTML you can just put a + before the equal sign (=) and it adds instead of replaces. – user2267175 Oct 01 '16 at 13:35

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

3 Answers3