Concatenate different textContext of a tag and img alt attribute

Question

I try to parse HTML with DOM javascript; Here's the input :

<span class="MATH">d<img width="34" height="39" align="MIDDLE" border="0" src="img1915.gif" alt="$ \,y^{k}/$">d<img width="16" height="17" align="BOTTOM" border="0" src="img     1893.gif" alt="$ \,s$"></span>

I would like to transform it in the following output :

<span class="MATH">d$ \,y^{k}/$d$\,s$</span>

As you can, I have to concatenate the first textContent element of span.MATH (" d ") with the first alt attribute of img tag (" $\\,y^{k}/$ "), and with the second textContent element of span.MATH (" d ") and the second alt attribute of img tag (" $\\,s$ ").

I would like to do the following thing, ie use a main loop for select all span.MATH and an inner loop for all child img tags :

[].forEach.call(document.querySelectorAll('span.MATH'),function(span) {
                                      [].forEach.call(span.querySelectorAll('img'),function(img) {                       
 I am looking for a method to set automatically : span.innerHTML = "d";
                            var alt_text = img.getAttribute('alt');
                            span.innerHTML = span.innerHTML+alt_text;
            });

How to extract automatically, at each occurence of img tag , the letter " d " wich precedes the img tag ?

Thanks in advance

Answer 1

You can use

img.alt

See this question at stackoverflow: Get an attributes value of the ALT attribute of a hyperlink