javascript - DOM object not referenced -

i have simple class has parent element, , store it's child element progress, when add child element nothing happens

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 + '%';   } } 

when call update function nothing happens. if print child element see has style of val% don't see "update" in dom.

it's copying object , not storing reference.

btw: works ok this.elem.queryselector('.child').style.width = val + '%';

also tried children[0] won't work.

thank in advance!

a simple utility converts markup documentfragment push around.

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 instead of node.innerhtml += somemarkup; better node.appendchild( fromhtml(somemarkup) )

in case

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

or in simple case, avoid markup @ all:

fill() {     var child = document.createelement('span');     child.classname = "child2"; //avoid enumerated classes/valriables/everything     this.elem.appendchild( child ); }