How to add li element with javascript

Question

I'm trying to add this code to my page:

<li><a href="#" target="_blank" id="twitter"><i class="fa fa-twitter fa-2x"></i></a></li>

Here is the full list:

<ul class="social" id="social">
      <li><a href="#" target="_blank" id="facebook"><i class="fa fa-facebook fa-2x"></i></a></li>
      <li><a href="#" target="_blank" id="pinterest"><i class="fa fa-pinterest fa-2x"></i></a></li>
      <li><a href="#" target="_blank" id="instagram"><i class="fa fa-instagram fa-2x"></i></a></li>
</ul>

And here is the script I wrote:

//Add Twitter
var newLi = document.createElement('li');
var newA = document.createElement('a');
var newI = document.createElement('i');

newA.setAttribute('id', 'twitter');
newA.setAttribute('target', '_blank');
newI.setAttribute('class', 'fa');
newI.setAttribute('class', 'fa-twitter');
newI.setAttribute('class', 'fa-2x');

newLi.appendChild(newA);
newA.appendChild(newI);

var position = document.getElementById('social');

position.appendChild(newLi);

Answer 1

You forgot to set the href value for your anchor and there's no content within the actual link so nothing shows.

newA.setAttribute('href', '#');
newA.innerHTML = 'something'; 

http://jsfiddle.net/d9vj2xwt/

You also should try using element.classList.add() to add the classes, so you're not overwriting

Answer 2

Have you ever thought of using JQuery?

The script would be as easy as this:

<script>
$('#social').append('<li><a href="#" target="_blank" id="twitter"><i class="fa fa-twitter fa-2x"></i></a></li>');
</script>

Answer 3

The problem is with your newI.setAttribute('class', it is overwriting the previously added class. You will notice the same thing when you do console.log(newI).

So, set all the classes for it in one go, like this:

newI.setAttribute('class', 'fa fa-twitter fa-2x');

Here is the working code snippet:

var newLi = document.createElement('li');
var newA = document.createElement('a');
var newI = document.createElement('i');

newA.setAttribute('id', 'twitter');
newA.setAttribute('target', '_blank');
newI.setAttribute('class', 'fa fa-twitter fa-2x'); // set all classes in one go!

newLi.appendChild(newA);

console.log(newLi);  // check it here

newA.appendChild(newI);

var position = document.getElementById('social');

position.appendChild(newLi);

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">

<ul class="social" id="social">
  <li><a href="#" target="_blank" id="facebook"><i class="fa fa-facebook fa-2x"></i></a></li>
  <li><a href="#" target="_blank" id="pinterest"><i class="fa fa-pinterest fa-2x"></i></a></li>
  <li><a href="#" target="_blank" id="instagram"><i class="fa fa-instagram fa-2x"></i></a></li>
</ul>

EDIT: Also add the href attribute as pointed by @Kierkegaurd

EDIT2: If you mean to refer the code that you posted as a comment to @epascarello's answer, here is my take:

Your code looks correct to me, its just that you havent set the href attribute for newA.

Here is the updated working code snippet:

//Add Twitter 
var newLi = document.createElement('li'); 
var newA = document.createElement('a'); 
var newI = document.createElement('i'); 

newA.setAttribute('id', 'twitter'); 
newA.setAttribute('target', '_blank'); 

newA.setAttribute('href', '#'); // set href here

newI.classList.add('fa'); 
newI.classList.add('fa-twitter'); 
newI.classList.add('fa-2x'); 

newLi.appendChild(newA); 
newA.appendChild(newI); 

var position = document.getElementById('social');

position.appendChild(newLi);

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">

<ul class="social" id="social">
    <li><a href="#" target="_blank" id="facebook"><i class="fa fa-facebook fa-2x"></i></a></li>
    <li><a href="#" target="_blank" id="pinterest"><i class="fa fa-pinterest fa-2x"></i></a></li>
    <li><a href="#" target="_blank" id="instagram"><i class="fa fa-instagram fa-2x"></i></a></li>
</ul>

Answer 4

Why mess with DOM nodes at all?

var wantToAdd = "<li><a href='#' target='_blank' id='twitter'><i class='fa fa-twitter fa-2x'></i></a></li>";
document.getElementById("social").innerHTML += wantToAdd;

Answer 5

As mentioned by a few others you are overriding the class, not appending a new class.

The old way of adding the classes would be to sepearte the classes with a whitespace

newI.setAttribute('class', 'fa fa-twitter fa-2x');

But with most modern browsers you can use classList.add()

newI.classList.add('fa');
newI.classList.add('fa-twitter');
newI.classList.add('fa-2x');

JSFiddle: http://jsfiddle.net/3rgdvq70/

Answer 6

You can make life easier using innerHTML:

var newLi = document.createElement('li');
newLi.innerHTML = '<a id="twitter" target="_blank" class="fa fa-twitter fa-2x"><i></i></a>';
var position = document.getElementById('social');
position.appendChild(newLi);