javascript add elements to li tag

Question

hi I want to add elements to LI when pressing on a link
I can add elements to a DIV like this

I have seen this question too Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

html code

<div id="div">
<a href="" onclick="add()">add</a>
</div>

javascript code

function add(){

    var bigDiv = document.getElementById('div');
    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    bigDiv.appendChild(input);
    }

and it works good
but if I change the html code from div to li like this

html code

<ul>
<li id="li">
<a href="" onclick="add()">add</a>
</li>
</ul>

javascript

function add(){
var bigLi = document.getElementById('li');
var input = document.createElement('input');
input.setAttribute('type', 'text');
bigLi.appendChild(input);
}

it doesn't work
I ensure that there is no syntax error

you are right , sorry , but i close it on my code already , i mean i make a mistake just in writing the question but on my code i did it before i ask — William Kinaan, May 11 '12 at 07:46
when i use li and i press that link , i can see an input but remove fast , i mean it add input for a second and then the input disappear — William Kinaan, May 11 '12 at 07:46

Joseph · Accepted Answer · 2012-05-11T09:32:32.367

2

check your HTML:

you have no closing </a>
your onclick code isn't wrapped in "" like onclick="add()"
you didn't suppress the link's default action (which is to redirect). try adding href="#" to prevent it from moving away and add return false to the end of the function.
```
<a href="#" onclick="add()">a</a>

//AND

function add(){
    ...
    return false;
}
```

edited May 11 '12 at 09:32

answered May 11 '12 at 07:46

Joseph

117,725
30
181
234

2

Or you can prevent the default event on the link by returning false. – kapa May 11 '12 at 07:48
YES MAN THE WRONG WAS BECAUSE I DIDN'T ADD # TO MY HREF , THANK YOU – William Kinaan May 11 '12 at 07:48
I WILL ACCEPT ANSWER AFTER 3 MINS but i am wondering , how it works with div and not works with li :) – William Kinaan May 11 '12 at 07:48
3

@Joseph When returning false from the function, the html should be changed to: `onclick="return add()"` – kapa May 11 '12 at 07:51
@WilliamKinaan Writing with all caps is considered shouting on the web. Please don't do it. – kapa May 11 '12 at 07:51
oh sorry i didn't know , any way the solution was to add # to my href , thank you all , and sorry bazmegakapa i didn't know what :) – William Kinaan May 11 '12 at 07:53
1

**AND** add return false, not **OR** – mplungjan May 11 '12 at 07:54
@mplungjan actually, you can do either or both. using `href="#"` will not make the page go away (but add a hash in the url and jump the page) and return false prevents further action. both suppress page change. come to think about it, using both is a good idea. – Joseph May 11 '12 at 07:56
@Joseph , yes but it is a problem , i don't want to add hash to the url , what should i do ? – William Kinaan May 11 '12 at 07:57
1

@WilliamKinaan then you should go for the `return false` – Joseph May 11 '12 at 07:58
As I said Please go for BOTH - the return false is the most important and the # will stop the link from giving errors if JS is turned off. # alone will unload the page and go to top if you are further down – mplungjan May 11 '12 at 08:45

javascript add elements to li tag

html code

javascript code

html code

javascript

1 Answers1