Как изменить Innerhtml недавно созданного элемента, который наблюдает взаимный наблюдатель, не вызывая утечки памяти и з ⇐ Javascript

[Anonymous]

Представьте себе веб -сайт, на котором бесконечная прокрутка, где ссылка, говорящая загрузка, появляется под каждым постом. Я хотел бы перейти от слова на что -то другое. (в моем случае изображение значка 24x24, а не слово «скачать», но пока не беспокойтесь об этом) .
html

Код: Выделить всё

 Initial download link

< /code>
css < /p>
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;
}
< /code>
javascript < /p>
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,
})

Как только этот новый элемент с классом .download был отслежен с использованием MutationObserver , я хотел бы изменить внутренний текст или innerhtml из этого.
Вы можете видеть, что происходит, не так ли? Когда я использую innerhtml или innertext для изменения значения недавно отслеживаемого элемента из MutualObserver , это заставляет некоторую рекурсию , чтобы отслеживать изменение изменения изменения. \/ или кодированное изображение BASE64.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... mutual-obs