在父 ID 中的 <img> 个元素之后添加 <span> 个元素

Question

我正在努力制作一个 JS 代码，该代码将在特定父项中的每个 <img> 标记后添加一个 <span> 元素。

这是 HTML 结构（简化版）：

<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>

我想在每个 <img> 元素后添加一个 <span> 元素， <span> 元素中的内容应该是每个 title 属性中的文本 <img>

因此部分：

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

在运行脚本之后应该是这样的：

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

这是我试过的方法，但没有用：

<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

selectedImage[i].appendChild(newSpan);会将span添加到img作为它的child，如果你想让他们成为兄弟姐妹，你需要selectedImage[i].parentNode.appendChild(newSpan);。

提示：您可以使用浏览器检查器查看 html 层次结构。

Answer 2

你不能做 .title() 它不是函数而是 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 3

你获取title attr的方式有误。需要做

 var currentImgTitle = selectedImage[i].title;

我是这样实现的

$(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);
        }
    }

在父 ID 中的 <img> 个元素之后添加 <span> 个元素

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

javascript

appendchild

getelementsbytagname

magento-1.9