Question

For some reason this isn’t working?
I want to fill the ul#list with some items, but it’s not working.

var list = "";
for (var i = 0 ; i<=history.length; i++) {
    list += "<li onclick=\"copyShortURL('"+history[i].shortURL+"');\"><div class=\"short\">"+history[i].shortURL+"</div><div class=\"long\">"+history[i].longURL+"</div></li>";
}
document.getElementById('list').innerHTML = list;

Could anyone tell me what’s going wrong 🙁
By this i mean it doesnt do anything, no list items are put into the list?

P.S. This is for mobilesafari only 🙂

Answer 1

The createElement method only takes the element name eg. document.createElement("li")

Hence you either build the DOM in code using a series of createElements and appendChilds with a smattering of assignments to innerHTML. OR you build up the HTML as a string to be appended to “list” by finally assigning to its innerHTML.

Here is the string version:-

var asHTML = [];
for (var i = 0 ; i<=history.length; i++) 
{ 
  asHTML.push("<li onclick=\"copyShortURL('"+history[i].shortURL+"');\"><div class=\"short\">"+history[i].shortURL+"</div><div class=\"long\">"+history[i].longURL+"</div></li>"); 
  document.getElementById("list").innerHTML += asHTML.join("\n");
}