How can I use innerHTML without delete the before innerHTML?

Question

Possible Duplicate:
Is it possible to append to innerHTML without destroying descendants' onclick functions?

I want to convert an Array to a HTML table, but innerHTML deletes it writes before. Here is the code:

<html><div id="tablaP"></div>

function cargar2() {
    document.getElementById('tablaP').innerHTML= "<table>"
    var h=1
    for (i=0;i<miArray.length;i++){ 
        document.getElementById('tablaP').innerHTML = '<tr>'
        for (j=0;j<miArray[i].length;j++){              
            document.getElementById("tablaP").innerHTML = '<td><td>'
        }
        document.getElementById('tablaP').innerHTML = '</tr>'
        h++
    }
    document.getElementById('tablaP').innerHTML = '</table>'
}

Here's another SO question on the topic: http://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-onclick-fu — Christofer Eliasson, Apr 03 '12 at 11:24

score 3 · Accepted Answer · answered Apr 03 '12 at 11:23

this can easily be done by building up your html string and then applying it with one call:

function cargar2(){
    var h=1;//not sure why you have this
    var html = "";

    html += "<table>";

    for (i=0;i<miArray.length;i++){ 
        html += '<tr>';

        for (j=0;j<miArray[i].length;j++){              
            html += '<td></td>' ;                      
        }   

        html += '</tr>';
        h++;
    }

    html += '</table>';

    document.getElementById('tablaP').innerHTML = html;
}

EDIT: Fixed all the code formatting!

score 0 · Answer 2 · answered Apr 03 '12 at 11:24

0

Use other approach. Build the whole table as a string, then do a single innerHTML.

That way it will be fast, and compatible with IE, that have a feew horrible related errors with adding rows to a table dynamically...

answered Apr 03 '12 at 11:24

Tei

1,400
8
6

score 0 · Answer 3 · answered Apr 03 '12 at 11:25

Create a string variable and add the contents of the table into said variable, something like:

var h=1;
var table='<table>';
for(i=0;i<miArray.length;i++) {
    table+='<tr>';
    for(j=0;j<miArray[i].length;j++) {
        table+='<td></td>';
    }
    table+='</tr>';
    h++;
}
document.getElementById('tablaP').innerHTML=table+'</table>';

score 0 · Answer 4 · answered Apr 03 '12 at 11:26

You should append all the table creation to a string and then finally assign the string to the innerHTML as shown below.

    function cargar2(){ 
       var tableCreation = "<table>"  
  var h=1 
  for (i=0;i<miArray.length;i++)
  {          
     tableCreation += '<tr>'     
     for (j=0;j<miArray[i].length;j++)
     {                      
        tableCreation += '<td></td>'             
      }       
     tableCreation += '</tr>' h++  
} 

document.getElementById('tablaP').innerHTML = tableCreation;

score 0 · Answer 5 · answered Apr 03 '12 at 11:30

To do this efficiently, push the HTML fragments into an array, join the strings in the array into a single string, and use innerHTML to put it in the element:

function cargar2() {
  var html = ['<table>'];
  var h = 1;
  for (i = 0; i < miArray.length; i++) { 
    html.push('<tr>');
    for (j = 0; j < miArray[i].length; j++) {              
      html.push('<td><td>');
    }
    html.push('</tr>');
    h++;
  }
  html.push('</table>');
  document.getElementById('tablaP').innerHTML = html.join('');
}

score 0 · Answer 6 · answered Apr 03 '12 at 11:31

OMG How many things that sower the eye...

don't call document.GetElementByID() everytime you want the div!

use a reference (variable) instead:

var myTableDiv = document.getElementById('tablaP');

myTableDiv.InnerHTML += ""

myTableDiv.innerHTML += "";
I Mostly suggest setting up a string.. and only finally passing the InnerHTML.

e.g.

var myTableHTML = ""; var h=1 for (i=0;i'; for (j=0;j myTableHTML += ''; }
myTableHTML += ''; h++ } document.getElementById('tablaP').innerHTML = myTableHTML;

How can I use innerHTML without delete the before innerHTML?

6 Answers6