動態添加列表元素到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> 

Answer 1

固定小提琴： https ： //jsfiddle.net/overlord_tm/jj3j356y/6/

您可能想要創建a元素，而不是link 。 此外，您要設置innerText屬性，而不是name屬性。 正如Rayon所提到的，使用window.onload

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>