javascript - Add list elements dynamically to ul element - Stack Overflow

admin管理员组

文章数量:1334420

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

Share Improve this question Follow edited May 5, 2016 at 6:46 Madhawa Priyashantha 9,90077 gold badges3838 silver badges6464 bronze badges asked May 5, 2016 at 6:42 Daniele CordanoDaniele Cordano 10311 silver badge77 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>

本文标签： javascriptAdd list elements dynamically to ul elementStack Overflow