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

Works for me...(beside the href attribute and at least an image or text...) what's the issue on your-end? — Roko C. Buljan
– Roko C. Buljan, Commented Dec 14, 2014 at 4:35
It's much easier to set properties than to use setAttribute, e.g. newA.id = 'twitter';. ;-) — RobG
– RobG, Commented Dec 14, 2014 at 5:22

Roko C. Buljan · Accepted Answer · 2014-12-14 04:36:39Z

1

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>

edited Dec 14, 2014 at 4:36

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered Dec 14, 2014 at 4:35

user679846

Sign up to request clarification or add additional context in comments.

Comments

Aweary · Accepted Answer · 2014-12-14 04:40:53Z

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

edited Dec 14, 2014 at 4:40

answered Dec 14, 2014 at 4:35

Aweary

2,31219 silver badges26 bronze badges

Comments

epascarello · Accepted Answer · 2014-12-14 05:42:11Z

1

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/

edited Dec 14, 2014 at 5:42

answered Dec 14, 2014 at 4:56

epascarello

208k20 gold badges206 silver badges246 bronze badges

2 Comments

Lance Beaudry Over a year ago

Thanks for the help everyone, I see my current issues, but I still must be doing something wrong (I'm new to this). Here is what I've got now: //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.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);

RobG Over a year ago

@LanceBeaudry—don't add that as a comment, add it as an edit to the OP. YOu have "newLI" and then "newLi".

ReallyMadeMeThink · Accepted Answer · 2014-12-14 04:39:28Z

0

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;

answered Dec 14, 2014 at 4:39

ReallyMadeMeThink

1,0818 silver badges13 bronze badges

3 Comments

RobG Over a year ago

That will remove all the other LIs, not sure the OP wants to do that.

user663031 Over a year ago

Do not promote the anti-pattern of treating the DOM as a string.

RobG Over a year ago

@torazaburo—you should explain why you consider that an anti–pattern.

Rahul Desai · Accepted Answer · 2014-12-16 04:28:08Z

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>

RobG · Accepted Answer · 2014-12-14 05:31:03Z

-1

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

answered Dec 14, 2014 at 5:31

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

RobG Over a year ago

Love down voters who are too lazy to explain their vote.

Collectives™ on Stack Overflow

How to add li element with javascript

6 Answers 6

Comments

Comments

2 Comments

3 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related