pyCthon pyCthon - 1 month ago 8
CSS Question

Changing the img in a nested alt tag

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

Answer

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