通过 div id 选择 div 内的锚点

Question

New to JS, just dipping in to solve a problem (I bet everyone says that.). I need to write a script to select an anchor and insert an <img> . There are several <a> 's within a div that has an id of _nwa_social_logins . I need to add an img tag to one of those. I'm not sure of the best way of doing this.

It's a captive portal page served up by a product we use, and the bit I'm interested in looks like this:

<div id="_nwa_social_logins">
  <a class="btn btn-facebook" href="<url>/guest/social-media.php?oauth_init=1&amp;oauth=facebook" title="">
    <i class="icon-facebook"></i> Facebook
  </a>
  <a class="btn btn-linkedin" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=linkedin" title="">
    <i class="icon-linkedin"></i> LinkedIn
  </a>
  <a class="btn btn-google" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=google" title="">
    <i class="icon-google"></i> Google
  </a>
  <a class="btn btn-twitter" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=twitter" title="">
    <i class="icon-twitter"></i> Twitter
  </a>
  <a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=azure" title=""><img src="images/icon-microsoft.png" align="middle">Microsoft Azure AD
  </a>
  <a class="btn btn-github" href="https://<url>/guest/social-media.php?oauth_init=1&amp;oauth=amazon" title="">Amazon</a>
</div>

So far I have

let items = document.querySelector('#_nwa_social_logins a');

To be honest I don't know how to even check if that has selected anything.

I need to select the Amazon anchor and set an <img> for the button. If the selection above gives me a list of <a> s (objects?) can I loop through them and look for one that has an href value that ends with 'amazon'?

Thank you

Answer 1

You can do this:

<script>
    window.addEventListener('load', () => {

        let links = document.querySelectorAll('#_nwa_social_logins a');
        links.forEach((link, index) => {
            if (link.getAttribute("href").toLowerCase().lastIndexOf('amazon') >= 0)
                link.innerHTML = '<img src="someimage">';
        });

    });
</script>