I would like to add more li elements, like the first one, dynamically, i.e. by pressing a button. Here is a not working example on jsfiddle

document.onload = init;
function init(){
  document.getElementById('add').onclick = add;
}
function add(){
  var el = document.getElementById('list');
  var node = document.createElement("li");
  var link = document.createElement("link");
  link.setAttribute('href', 'www.google.it');
  link.setAttribute('name', 'link');
  node.appendChild(link);
  el.appendChild(node);
}

<ul id="list">
  <li>
    <a href="www.google.it">link</a>
  </li>
</ul>
<button id="add">Add link</button>

I would like to add more li elements, like the first one, dynamically, i.e. by pressing a button. Here is a not working example on jsfiddle

document.onload = init;
function init(){
  document.getElementById('add').onclick = add;
}
function add(){
  var el = document.getElementById('list');
  var node = document.createElement("li");
  var link = document.createElement("link");
  link.setAttribute('href', 'www.google.it');
  link.setAttribute('name', 'link');
  node.appendChild(link);
  el.appendChild(node);
}

<ul id="list">
  <li>
    <a href="www.google.it">link</a>
  </li>
</ul>
<button id="add">Add link</button>

• javascript
• html

• Use window.onload instead of document.onload.. I am not sure when document.onload will get invoked... – Rayon Commented May 5, 2016 at 6:46
• Fiddle here...jsfiddle/rayon_1990/o93ghfc9/3 – Rayon Commented May 5, 2016 at 6:46

2 Answers 2

fixed fiddle here: https://jsfiddle/overlord_tm/jj3j356y/6/

You probably want to create an a element, not link. Also, you want to set innerText property, instead of name attribute. And as Rayon mentioned, use window.onload

window.onload = init;
function init(){
  document.getElementById('add').onclick = add;
}
function add(){
  var el = document.getElementById('list');
  var node = document.createElement("li");
  var link = document.createElement("a");
  link.setAttribute('href', 'www.google.it');
  link.innerHTML = "link";
  node.appendChild(link);
  el.appendChild(node);
}

<ul id="list">
  <li>
    <a href="www.google.it">link</a>
  </li>
</ul>
<button id="add">Add link</button>