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

Answer 1

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;
  }