Simple Javascript code issue

Question

I am trying to insert a new image to an existing element. I have

  var backImg = createElement('img', { className : 'link', src : '/images/btn.png' });

  var save_bt=document.getElementsByClassName('button');

  save_bt.appendChild(backImg);


The above codes gave me error:

Object #<NodeList> has no method 'appendChild'

Can anyone help me about it? No Jquery codes plz. Thanks a lot!

Stecman · Accepted Answer · 2012-08-31 00:47:28Z

4

document.getElementsByClassName('button') returns a NodeList, not an element. If you want to add backImg to every element with the class .button you would need to loop through that NodeList:

for(var i=0,c=save_bt.length; i<c; i++){
    save_bt[i].appendChild(backImg);
}

If you are trying to target a single element, you probably want to use id HTML attribute instead of class, then:

document.getElementById('button').appendChild(backImg);

Note that HTML ids must be unique within the document.

edited Aug 31, 2012 at 0:47

answered Aug 31, 2012 at 0:40

Stecman

3,13024 silver badges19 bronze badges

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

Comments

Ganzert · Accepted Answer · 2012-08-31 04:42:04Z

0

If you are trying to target a single element, you should to use 'id':

document.getElementById('id_of_the_element').src = "new_img.png";

answered Aug 31, 2012 at 4:42

Ganzert

484 bronze badges

Collectives™ on Stack Overflow

Simple Javascript code issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related