javascript - 如何在特定的资源管理器中使用 javascript 添加带有链接的图像？

Question

我只想在 Safari 中添加带有链接的图像，这是我的 html 和 js。我是 javascript 的新手。

var isSafari = navigator.userAgent.match("Safari") ;
    
if (isSafari) {
    alert('You are using Safari or Google');
        
    var image = document.createElement('img');
    image.setAttribute('src','images/ar_but.png'); 

    document.getElementsByClassName('gallery').getElementsByClassName('thumbnail').getElementById('AddImageInhere').appendChild(image); 
}

<!-- Main Container -->
  <div class="container">
    <div class="gallery">
      <div class="thumbnail">
        <a href="#"><img src="images/icon01.jpg" alt="" width="2000" class="cards" /></a>
        <h4>TITLE</h4>
        <a href="sofa.usdz" rel="ar" id="AddImageInhere"> !!!</a>
        <p class="tag">HTML, CSS, JS, WordPress</p>
        <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>  
    </div> 
  </div> 
<!-- Main Container Ends -->

但是这段代码不起作用。我想在 !!! 添加像正确的图像一样的图像!这里的结果:one two

出现警报。但是在! .没有图像。

我用括号。感谢阅读。

编辑: 这是错误。

ERROR: 'navigator' is not defined. [no-undef]   var isSafari = navigator.userAgent.match("Safari");
ERROR: 'alert' is not defined. [no-undef]   alert('You are using Safari or Google');
ERROR: 'document' is not defined. [no-undef]    var image = document.createElement('img');
ERROR: 'document' is not defined. [no-undef]    document.getElementById('AddImageInhere').appendChild(image);

Answer 1

只需删除前 2 个 getElementsByClassName() 函数。你不能链接它们，因为它们返回一个节点列表。节点列表没有 getElementsByClassName() 函数。

参见 https://developer.mozilla.org/en-US/docs/Web/API/NodeList

var isSafari = navigator.userAgent.match("Safari");
if (isSafari) {
  alert('You are using Safari or Google');
  var image = document.createElement('img');
  image.setAttribute('src', 'https://dummyimage.com/600x400/000/fff');
  document.getElementById('AddImageInhere').appendChild(image);
}

<!-- Main Container -->
<div class="container">
  <div class="gallery">
    <div class="thumbnail">
      <a href="#"><img src="images/icon01.jpg" alt="" width="2000" class="cards" /></a>
      <h4>TITLE</h4>
      <a href="sofa.usdz" rel="ar" id="AddImageInhere"> !!!</a>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>https://stackoverflow.com/questions/58320852/how-to-use-javascript-add-image-with-link-in-specific-explorer/58320966#
  </div>
</div>

对于多个图像，我建议使用 QuerySelector all 并为每个追加创建一个新图像。

var isSafari = navigator.userAgent.match("Safari");
if (isSafari) {
  alert('You are using Safari or Google');
  
  document.querySelectorAll('.AddImageInhere').forEach((el) => { 
    el.appendChild(getImage()); 
  });
}

function getImage() {
  var image = document.createElement('img');
  image.setAttribute('src', 'https://dummyimage.com/600x400/000/fff');
  return image;
}

<!-- Main Container -->
<div class="container">
  <div class="gallery">
    <div class="thumbnail">
      <a href="#"><img src="images/icon01.jpg" alt="" width="2000" class="cards" /></a>
      <h4>TITLE</h4>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <a href="sofa.usdz" rel="ar" class="AddImageInhere"> !!!</a>
      <p class="tag">HTML, CSS, JS, WordPress</p>
      <p class="text_column">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>https://stackoverflow.com/questions/58320852/how-to-use-javascript-add-image-with-link-in-specific-explorer/58320966#
  </div>
</div>