JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<div  id="BannerImage">
  <div  id="BannerImageSmall">
      <b>old</b>
  </div>
</div>

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

CSS

#BannerImage {border:2px solid red;}
#BannerImageSmall {border:2px solid blue;}

JavaScript

function linkClicking(myLink){
    var dv = document.getElementById('BannerImage');
    
    /*
         No need to remove child nodes if you're overwriting then anyway... 
         //remove all child nodes
        while (dv.hasChildNodes()) {
        dv.removeChild(dv.lastChild);

        } */  
         dv.style.backgroundImage = 'url("../images/banners/homeBright.jpg")';
         
         dv.innerHTML='<b>' + myLink + '</b>';
         
}



var links = document.querySelectorAll("a");
for (var i = 0; i < links.length; i++) {
    links[i].onclick = function(){linkClicking(this.href);}
}