最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin7浏览0评论

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>

Share Improve this question edited May 5, 2016 at 6:46 Madhawa Priyashantha 9,9007 gold badges38 silver badges64 bronze badges asked May 5, 2016 at 6:42 Daniele CordanoDaniele Cordano 1031 silver badge7 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

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>

发布评论

评论列表(0)

  1. 暂无评论