title: <img> tag not working inside a <td> tag when auto generated from JavaScript file
body: <p>I'am currently working on a school project where I'am to develop a DotA 2 web application, where I have created a HTML table that is supposed to show a specific Hero from DotA 2 statistics against other Heroes. There are 118 heroes total, so the table will have 117 rows. This matchup table also has four columns:</p>
  <ul>
  <li>Hero (name of the hero)</li>
  <li>Games played</li>
  <li>Win rate</li>
  <li>Advantage</li>
  </ul>
  <p>For visual reference, the image below is close to the same layout I strive for: (credit to opendota.com).</p>
  <p><a href="https://i.stack.imgur.com/ksXvL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ksXvL.png" alt="enter image description here" /></a></p>
  <p>Like the image above, I would also like to have a small image avatar along with the name of the Hero in each row, in the HERO column, like for example &quot;Void Spirit&quot;, &quot;Rubick&quot; and &quot;Clockwerk&quot;.</p>
  <p>Since I dont want to manually autofill in 118 rows in my HTML code, I tried to develop a JavaScript file that would do this for me, which can be seen below:</p>
  <pre><code>const matchupTableBody = document.querySelector(&quot;.matchup-table &gt; tbody&quot;);
  const numberOfHeroes = 118;
  
  function loadMatchups() {
      for (i = 0; i &lt; numberOfHeroes; i++) {
          currentHero = getHero(i);
          populateMatchups(getHeroImage(currentHero));
      }
  }
  
  // Populate the table, importing the API and hero data.
  function populateMatchups(heroImagePath) {
  
      // create new table row
      const tr = document.createElement(&quot;tr&quot;);
  
      // create new table cell / data
      const td = document.createElement(&quot;td&quot;);
  
      // load the table cell with a img tag and the heroImagePath
      td.textContent = '&lt;img src=&quot;' + heroImagePath + '&quot;/&gt;';
  
      tr.appendChild(td);
  
      matchupTableBody.appendChild(tr);
  }
  
  document.addEventListener(&quot;DOMContentLoaded&quot;, () =&gt; { loadMatchups(); });
  </code></pre>
  <p>the loadMatchups() function loads the Hero image avatar path (which I have stored locally on my machine) and sends this image path to the populateMatchups() function. The populateMatchups() function in short creates a new table-row for each of the 117 other heroes, and creates a new table-cell with a  tag that points to the Hero image avatar path on my machine.</p>
  <p>However, this does not seem to work when autogenerated by this JavaScript, as can be seen in the image below, in my own table:</p>
  <p><a href="https://i.stack.imgur.com/efmaZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/efmaZ.png" alt="enter image description here" /></a></p>
  <p>The thing that really confuses me is, that the two  paths that are highlighted in blue works completely fine when manually inserted into the first  element of the table (the first blue highlighted path is the orange guy to the right in the first row, and the second highlighted path is the red guy to the left in the first row). But it does not work when generated from my JavaScript file.</p>
  <p>And I simply cannot understand why (although Iam new to JavaScript, so I think the issue lies there). Could anyone please help or point me in the right direction?</p>
  <p>Here is my HTML code for the table:</p>
  <pre><code>&lt;div class=&quot;matchup-table-container&quot;&gt;
          &lt;table class=&quot;matchup-table&quot;&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;HERO&lt;/th&gt;
                      &lt;th&gt;GAMES PLAYED&lt;/th&gt;
                      &lt;th&gt;WIN RATE&lt;/th&gt;
                      &lt;th&gt;ADVANTAGE&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;img src=&quot;ressources/images/heroes/axe_sb.png&quot;&gt;&lt;/td&gt;
                      &lt;td&gt; &lt;img src=&quot;ressources/images/heroes/antimage_sb.png&quot;&gt;
                      &lt;/td&gt;
                      &lt;td&gt;50&lt;/td&gt;
                      &lt;td&gt;
                          &lt;img src=&quot;ressources/images/heroes/snapfire_sb.png&quot;&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  </code></pre>
  <p>EDIT: Unfortunately I forgot to add matching closing &quot;/ in the JavaScript file I posted first - I had tried that earlier, and that didnt work so I changed something and forgot to change back before I posted here. When looking at my JavaScript thorugh the browser console, I can see that it works in the sense that all the 117  tags gets created with a correct image path, since I can copy the image path from the browser console and manually insert it into a  tag, and then it loads.</p>
  <p><a href="https://i.stack.imgur.com/EFxvu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EFxvu.png" alt="enter image description here" /></a></p>