javascript innerHTML替代

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

Since you're using jQuery already, you can use its .html() method:

e1.html( e12.html() );

This should do the same as this:

el.innerHTML=el2.innerHTML;

Answer 2

If you have JQuery loaded in the page already you can use JQuery selectors and $(element).html() to get the innerHTML.

var names =['id', 'name', 'quantity', 'description']; 

for (var i = 0; i < names.length; i++){
    var el = $("#product_"+names[i]+"_main");  
    var el2 = $("#product_"+names[i]+selection);

    if (el.children().size() > 0) {                                 
        // Your code here
    } 

    if (el && el2) {
        el.html() = el2.html();
    }
}

Untested code.

Answer 3

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;