Insert dynamic text into a webpage (fauilty question)

by desbest

HTML

<div id="container">
<span class="download"> Initial download link</span>


</div>

CSS

body { background-color: #1c1c1c; }

span{ 
background-color: darkcyan; color: #dcdcdc; 
padding: 8px; font-family: Tahoma; 
/* font-weight: bold; */
display: inline-block;
margin-right: 8px; margin-bottom: 8px;
border: 2px ridge #1c1c1c;
}

.download {
	background-color: #cc3c3c;
	border: 3px ridge #3c3c3c;
}

JavaScript

let i = 1
function insertElement() {
  var newSpan = document.createElement("span")
  newSpan.classList.add("download")
  var newText = document.createTextNode("new button #" + i)
  newSpan.appendChild(newText)
  //console.log(newSpan.classList)

  if (i < 210) {
    document.getElementById("container").appendChild(newSpan)
  }
  setTimeout(insertElement, 4200)
  i++
}

//(function(){
// do some stuff
setTimeout(insertElement)
//})();

var elemToObserve = document.getElementById("container")

//var observer = new MutationObserver(function (mutations) {
var observer = new MutationObserver((mutations) => {
  for (let mutation of mutations) {
    if (mutation.type === "childList") {
      //do NOT use console.log for mutation.target as it causes a HUGE INSTANTANEOUS memory leak
      //console.log(mutation)
	  //if (mutation.nodeType === Node.ELEMENT_NODE ) {
      if (mutation.target.classList.contains("download") !== true) {
        console.log("a download button was found")
      }
    }
  }
})

observer.observe(elemToObserve, {
  childList: true,
  attributes: true,
  characterData: false,
  subtree: true,
})