How to use javascript add image with link in specific explorer?

Question

I want to add an image with link only when I in Safari, and this is my html and js.I am new for 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 -->

But this code doesn't work. I want to add an image like right one at !!! here the result : one two

It appear the alert. But at !!! . There's no image.

I use brackets. Thank for reading.

edit: Here is the error.

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

Just remove the first 2 getElementsByClassName() functions. You can't chain them since they return a nodelist. Nodelists don't have the getElementsByClassName() function.

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

For multiple images I suggest using QuerySelector all and create a new image for each append.

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>