Question

I am using innerHTML to assign updated value to certain elements on a page. However, the innerHTML caused the jquery on the page stopped working, and the css of the page runs out.

So I tried to replace with DOM elements but it’s not working. Any idea how to fix this?
Thanks !

var names =['id','name','quantity','description']; 
    var len = names.length;
    for (var i = 0; i < len; i++){
        var el = document.getElementById(\'product_\'+names[i]+\'_main\');  
        var el2 = document.getElementById(\'product_\'+names[i]+selection);
       if(el.hasChildNodes()) {                                 
         el.replaceChild(el2.firstChild.nodeValue, el.firstChild);
       } 
      if(el && el2) el.innerHTML=el2.innerHTML; /* this part works, but it caused the page CSS to run and jquery no longer working */
      }

Answer 1

el.replaceChild(el2.firstChild.nodeValue, el.firstChild);

Huh, what are you doing there? You can’t replace a nodeValue, you can only replace nodes:

el.replaceChild(el2.firstChild, el.firstChild);

this will move the firstChild of el2 into el. If you want to copy it, you’d need to clone it before. If you want all of the children, you’d need to loop over them.

If that firstChild is a text node, you can easily (re)set its value, and copy those of el2:

if (el.firstChild && el.firstChild.nodeType == 3
  && el2.firstChild && el2.firstChild.nodeType == 3)
    el.firstChild.nodeValue = el2.firstChild.nodeValue;