如何使用querySelectorAll forEach更改元素的innerHTML

Question

我正在使用此脚本将 p 标签更改为 i 标签。

有 2 个带有 .account-link-toggle 类的元素，但控制台显示节点列表中有 3 个元素。都没有更新。

如有任何建议，我们深表感谢...

window.onload = function() {
  const userIconS = document.createElement('i');
  const accountLinkS = document.querySelectorAll ( '.account-link-toggle');
  userIconS.className = "fa-light fa-user";
  console.log("before" + accountLinkS);
  accountLinkS.forEach(changeEle);

  function changeEle() {
    accountLinkS.innerHTML = userIconS;
  }
  console.log("after" + accountLinkS);
}

<ul class="et-social-icons">
    <li class="et-social-icon subscribe-side">
        <a href="<?php echo site_url('/subscribe'); ?>">
            <span style="color:#D20018">Subscribe</span>
        </a>
    </li>
    <li class="et-social-icon account-side">
        <a href="<?php echo site_url('/my-account'); ?>">
            <span id="account-link-wrap" class="account-link-toggle">
                <p id="account-link">Sign In</p>
            </span>
        </a>
    </li>
    <li class="et-social-icon basket-side">
        <a href="<?php echo site_url('/basket'); ?>" class="icon">
            <i class="fa-light fa-cart-shopping"></i>
        </a>
    </li>
    <li class="search">
        <a class="search_icon"><i class="fa fa-search"></i><span>Search</span></a>
        <div style="display:none;" class="visform"> <?php get_search_form(); ?></div>
    </li>
</ul>

Answer 1

我最终使用了 for 循环。真正的问题是新的 i 元素被使用了两次，所以在 for 循环中我使用了 .cloneNode ，以便元素可以存在于 2 个位置。

<script type="text/javascript">
if ( document.body.classList.contains( 'logged-in' ) ) {
window.onload = function() {
    let userIconS = document.createElement('i');
    let accountLinkS = document.querySelectorAll('.account-link-toggle');
    userIconS.className = "fa-light fa-user";
    
    for (let i = 0; i < accountLinkS.length; i++) {
        accountLinkS[i].removeChild(accountLinkS[i].firstElementChild);
        accountLinkS[i].appendChild(userIconS.cloneNode(true));
    }
}

}