Changing the img in a nested alt tag

Question

How can I programmatically change the following img in the structure below?

  <div id="runner" class="nav brand pull-left">
        <a alt="motherboard" href="/tree/">
            <img alt="mega node" src="img.png"></img>
        </a>
  </div>

firefox points me to this

#runner > a:nth-child(1) > img:nth-child(1)

I've tried using standard methods as the following with various naming conventions

document.getElementById("#runner").src="icon.png";
document.getElementById("#runner.a.img").src="icon.png";
document.getElementById("#runner.img").src="icon.png";
document.getElementById("mega node").src="icon.png";

I've even tried css with no avail,

div#runner {
    content:url("img.png");
}

@Havenard I was following the example from this answer http://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag — pyCthon, May 24 '14 at 03:58
Nah, `getElementById()` will select a DOM element by the specified `id`, and `id` only. I suppose you want to use `querySelector()` instead. — Havenard, May 24 '14 at 04:01
@Havenard ah i get it now, thanks, for science how would i do this with css? — pyCthon, May 24 '14 at 04:02
http://stackoverflow.com/questions/2676436/define-an-imgs-src-attribute-in-css — Havenard, May 24 '14 at 04:03

score 5 · Accepted Answer · edited Jan 15 '15 at 17:56

Your are specifying argument in getElementById() in a wrong way, you should provide just an id, without selector #. You can find your #runner div and then find the first <img> tag in it and change it's src attribute :

  document.getElementById('runner').querySelector('img').src = 'icon.png'

Example

Or even simpler, without using getElementById() :

 document.querySelector('#runner a img').src = 'icon.png'

Example

Changing the img in a nested alt tag

1 Answers1