DOM-Objekt nicht referenziert

Question

ich eine einfache Klasse, die ein übergeordnetes Element hat, und i speichern, es ist untergeordnetes Element Fortschritt, aber wenn ich auf das Kind Element nichts hinzufügen geschieht

class MyClass { 
    constructor(element) { 
    this.elem = element; 
    this.child = this.elem('.child'); 
    this.fill(); 
    } 
    fill() { 
    this.elem.innerHTML += '<span class="child2"></span>'; 
    } 
    update(val) { 
    this.child.style.width = val + '%'; 
    } 
} 

Wenn ich die Update-Funktion nichts nennen das passiert. Wenn ich das Kindelement drucke, sehe ich, dass es einen Stil von val% hat, aber ich sehe es nicht im DOM "update".

Es ist wie es das Objekt kopiert und die Referenz nicht speichert.

BTW: Funktioniert auch dies ok this.elem.querySelector('.child').style.width = val + '%';

auch versucht, mit children[0] wird auch nicht funktionieren.

Vielen Dank im Voraus!

Answer 1

Ein einfaches Dienstprogramm, das Markup in ein DocumentFragment umwandelt.

var dummy = document.createElement('div'); 
function fromHTML(markup){ 
    dummy.innerHTML = markup; 
    for(var frag = document.createDocumentFragment(), fc; fc = dummy.firstChild;) 
     frag.appendChild(fc); 
    return frag; 
} 

so statt node.innerHTML += someMarkup; besser node.appendChild(fromHTML(someMarkup))

in Ihrem Fall

fill() { 
    this.elem.appendChild(fromHTML('<span class="child2"></span>')); 
} 

oder in diesem einfachen Fall zu vermeiden, dass das Auszeichnungsüberhaupt:

fill() { 
    var child = document.createElement('span'); 
    child.className = "child2"; //avoid enumerated classes/valriables/everything 
    this.elem.appendChild(child); 
} 

Answer 2

Als Kommentator sagte, dies ist wahrscheinlich mit der Verwendung von .innerHTML auf einem paren verbunden t Knoten oder der Knoten selbst. Der Grund dafür ist, wenn Sie .innerHTML verwenden, ändert JavaScript das DOM und "baut" es innerhalb des Knotens innerHTML um. Dadurch werden alle vorhandenen Handles für die vorhandenen Knoten freigegeben. Dies bedeutet, dass alle Listener und Referenzen verloren gehen, wenn Sie das innerHTML aktualisieren.

In Betracht ziehen, anstatt die innereHTML zu bearbeiten, und das wird Ihr Problem lösen.