Add <span> elements after <img> elements within parent ID

Question

I'm struggling to make a JS code that will add a <span> element after each <img> tag within a certain parrent.

This is the HTML structure (shortened version):

<ul id="payment_form_quickpaypayment_payment">
    <li>
        <table>
            <tbody>
                <tr>
                    <td>
                        <input type="radio" class="radio" name="qpayment_type" value="dankort" checked="checked">
                    </td>
                    <td>
                        <img src="/dankort.png" title="Dankort">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" class="radio" name="qpayment_type" value="mastercard">
                    </td>
                    <td>
                        <img src="/mastercard.png" title="MasterCard">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="radio" class="radio" name="qpayment_type" value="mastercard-debet">
                    </td>
                    <td>
                        <img src="/mastercarddebet.png" title="MasterCard Debet DK">
                    </td>
                </tr>
            </tbody>
        </table>
    </li>
</ul>

I want to add a <span> element after each <img> element and the content in the <span> element should be the text in the title attribute of each <img>

So the section:

<td>
    <img src="/dankort.png" title="Dankort">
</td>

should look like this after running the script:

<td>
    <img src="/dankort.png" title="Dankort">
    <span>Dankort</span>
</td>

This is what I've tried but it's not working:

<script>
    function payLoad() {
        var selectedImage = document.getElementById("payment_form_quickpaypayment_payment").getElementsByTagName('img');

        var i;
        for (i = 0; i < selectedImage.length; i++) {
            var newSpan = document.createElement("span");
            var currentImgTitle = selectedImage[i].title();
            var t = document.createTextNode(currentImgTitle);
            newSpan.appendChild(t);
            selectedImage[i].appendChild(newSpan);
        }
    }
    window.onload = payLoad;
</script>

Answer 1

You cannot do .title() it's not a function but a property of the img.

<ul id="payment_form_quickpaypayment_payment">
  <li>
    <table>
      <tbody>
        <tr>
          <td>
            <input type="radio" class="radio" name="qpayment_type" value="dankort" checked="checked">
          </td>
          <td>
            <img src="/dankort.png" title="Dankort">
          </td>
        </tr>
        <tr>
          <td>
            <input type="radio" class="radio" name="qpayment_type" value="mastercard">
          </td>
          <td>
            <img src="/mastercard.png" title="MasterCard">
          </td>
        </tr>
        <tr>
          <td>
            <input type="radio" class="radio" name="qpayment_type" value="mastercard-debet">
          </td>
          <td>
            <img src="/mastercarddebet.png" title="MasterCard Debet DK">
          </td>
        </tr>
      </tbody>
    </table>
  </li>
</ul>
<script>
  function payLoad() {
    var selectedImage = document.getElementById("payment_form_quickpaypayment_payment").getElementsByTagName('img');

    var i;
    for (i = 0; i < selectedImage.length; i++) {
      var newSpan = document.createElement("span");
      newSpan.innerText = selectedImage[i].title
      selectedImage[i].parentNode.appendChild(newSpan);
    }
  }
  window.onload = payLoad;
</script>

Answer 2

selectedImage[i].appendChild(newSpan); will add span into img as its child, if you want to make them siblings, you need selectedImage[i].parentNode.appendChild(newSpan);.

Tips: you can use browser inspector to view html hierarchies.

Answer 3

Your way of getting title attr is wrong. Need to do

 var currentImgTitle = selectedImage[i].title;

I have implemented like this

$(document).ready(function(){
    payLoad();
});
function payLoad() {
    var selectedImage = document.getElementById("payment_form_quickpaypayment_payment").getElementsByTagName('img');
    var i;
    for (i = 0; i < selectedImage.length; i++)      {
    var newSpan =   document.createElement("span");
            var currentImgTitle = selectedImage[i].title;

            var t = document.createTextNode(currentImgTitle);
            newSpan.appendChild(t);
            selectedImage[i].appendChild(newSpan);
        }
    }