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 ofdocument.onload
.. I am not sure whendocument.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
Reset to default 3fixed 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>