title: Adding element to DOM but JS doesn't know it's there
body: <p>I am adding an element to the DOM on mouse up of a button being clicked.</p>
  
  <p>The element is adding to the DOM I can see it when I inspect. However within the same mouse up - after adding the element to the DOM - I want to manipulate that element, but I am unable to do so because the new element with it's unique id was not present when the DOM loaded first time around.</p>
  
  <p>I am given this error as the newly created element effectively does not exist: <code>Uncaught TypeError: Cannot set property 'innerHTML' of null</code></p>
  
  <p>How can I 'update' what is present in the DOM so the JS can see what's changed and recognise any new elements and ids?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const likeWrapper = document.getElementById("likeWrapper");
  let yourLikeTotal = 0;
  let mouseDown = 0;
  const yourLikes = document.getElementById("yourLikes_postid_" + yourLikeTotal);
  
  document.body.onmousedown = function() { ++mouseDown }
  document.body.onmouseup = function() { --mouseDown }
  
  
  const addToYourLikes = () =&gt; {
    console.log(yourLikeTotal)
    console.log(yourLikes)
    yourLikes.innerHTML = yourLikeTotal
    yourLikeTotal++
    console.log("addToYourLikes");
  }
  
  const moveYourLikes = () =&gt; {
    yourLikes.classList.add("move-your-likes")
    setTimeout( () =&gt; { 
    yourLikes.classList.remove('move-your-likes');
      console.log("remove class")
  }, 800);
    console.log("moveYourLikes");
  }
  
  const addEl = () =&gt; {
    const id = "yourLikes_postid_" + yourLikeTotal;
    const div = '&lt;div id=' + id + ' ' + 'class="your-likes"&gt;0&lt;/div&gt;';
    likeWrapper.innerHTML += div;
  }
  
  
  likeWrapper.addEventListener("mouseup", () =&gt; {
    /* if mousedown and up execute 1 button animation -
    while mousedown do not end animation, just keep adding to totals
    */
    addEl();
    addToYourLikes();
    moveYourLikes();
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: sans-serif;
    font-size:13px;
    user-select: none;
  }
  
  main {
    margin: 160px 0 0 0;
    width: 100%;
  }
  
  .like-button-wrapper {
    display:flex;
    width: 30px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
  }
  
  .like-button {
    position:absolute;
    z-index:1;
    width:30px;
    height:30px;
    border:2px solid red;
  }
  
  .like-total {
    line-height:30px;
    margin: 0 0 0 40px;
  }
  
  .your-likes {
    width:20px;
    height:20px;
    font-size:10px;
    text-align:center;
    border-radius: 50%;
    background:#989898;
    color:#fff;
    position:absolute;
    left:5px;
    z-index:0;
    line-height:20px;
    margin: 0 10px 0 0;
    opacity:1;
  }
  
  .move-your-likes {
    -webkit-animation-name: moveLikes;
    -webkit-animation-duration: 0.8s;
  }
  
  @keyframes moveLikes {
    from { top:0; opacity:0; }
    to { top: -40px; opacity:1; }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="like-button-wrapper" id="likeWrapper"&gt;
      &lt;div class="like-button" id="likeButton"&gt;&lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>