He logrado hacer lo que estaba buscando.
let team1 = `
<figure class="figure">
<img class="figure img-fluid competition imgTeam" width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="">
<figcaption style="margin-bottom: -10%; margin-top: 8%; margin-right: 5px;" class="figure-caption">
Sociedad
</figcaption>
</figure>
`;
for(const ele of document.getElementsByClassName("team-1")){ele.innerHTML=(team1)}
.competition{align-items:center;width:48px;background-size:48px;margin-top:-5px}
.imgTeam{background-image:url(https://www.sofascore.com/images/team-logo/football_2824.png);background-repeat:no-repeat}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<span class="team-1"></span>
He utilizado el siguiente código para crear mi estructura HTML utilizando "figure" de Bootstrap:
<figure class="figure">
<img class="figure img-fluid competition imgTeam" width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="">
<figcaption style="margin-bottom: -10%; margin-top: 8%; margin-right: 5px;" class="figure-caption">
Sociedad
</figcaption>
</figure>
Luego he creado una variable en JavaScript en la cual he guardado mi código:
let team1 = `
<figure class="figure">
<img class="figure img-fluid competition imgTeam" width="48" src="https://i.ibb.co/w0qg9JF/trans.png" alt="">
<figcaption style="margin-bottom: -10%; margin-top: 8%; margin-right: 5px;" class="figure-caption">
Sociedad
</figcaption>
</figure>
`;
Y por último imprimo en un elemento html lo que quiero mostrar obteniendo la clase en JavaScript con el siguiente código:
for(const ele of document.getElementsByClassName("team-1")){ele.innerHTML=(team1)}
No sé si es la manera más efectiva de hacerlo, sin embargo funciona perfecto para lo que yo necesito.