动态向ul元素添加列表项

Question

我想动态地添加更多的li元素，就像第一个一样，即通过按按钮来实现。这是一个不能工作的例子，位于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>

- Daniele Cordano

---

使用window.onload而不是document.onload。我不确定document.onload会在什么时候被调用... - Rayon

在这里测试代码...https://jsfiddle.net/rayon_1990/o93ghfc9/3/ - Rayon

Answer 1

这里是已修复的代码演示：https://jsfiddle.net/overlord_tm/jj3j356y/6/

您可能需要创建一个 a 元素，而不是 link。此外，您需要设置 innerText 属性，而不是 name 属性。还有，如 Rayon 所提到的，使用 window.onload。

- Andraz

Answer 2

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>

- dimlucas