get inner HTML element using javascript

Question

I have the following html hierarchy:

...
<div class="custom-img-wrapper">
<a target="_blank" class="link-d" href="#"><img class="custom-below-img" src="some source"></a>
<h3><a target="_blank" class="link-d" href="#">some text</a></h3>
</div>

<div class="custom-img-wrapper">
<a target="_blank" class="link-d" href="#"><img class="custom-below-img" src="some source"></a>
<h3><a target="_blank" class="link-d" href="#">some text</a></h3>
</div>
...

and i am going over the links with this for loop :

var x = document.getElementsByClassName("link-d");
for (i = 0; i < x.length; i++) {
    x[i].href = link;
}

now my question is how can i save the src of the image which is inside the link, so i'll get somwthing like this:

var x = document.getElementsByClassName("link-d");
for (i = 0; i < x.length; i++) {
    var link_of_image_inside_node = x[i].????
    x[i].href = link;
}

i know i can loop over the custom-below-image but that's not what i need, and im looking for a pure JavaScript no jQuery solution any idea? thx

bugwheels94 · Accepted Answer · 2016-03-28 08:22:28Z

3

If a tags first child element is image then

var link_of_image_inside_node = x[i].firstChild.src;

OR

var link_of_image_inside_node = x[i].children[0].src; //ignores all the text before img tag

where x[i] is the anchor element

edited Mar 28, 2016 at 8:22

answered Mar 27, 2016 at 14:46

bugwheels94

32.1k3 gold badges43 silver badges62 bronze badges

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

5 Comments

Grundy Over a year ago

firstChild can return TextNode also

bugwheels94 Over a year ago

@Grundy then the x[i].children[0].src will be handy

Grundy Over a year ago

methinks, this can be noted in answer :-)

bugwheels94 Over a year ago

@Grundy done however you can also edit any answer if you feel like it :)

Grundy Over a year ago

I know :-) i just notice that first variant can return wrong result :-) solution you suggest self

Collectives™ on Stack Overflow

get inner HTML element using javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related