Jump to content

innerHTML is asynchronous...?


MacGoose
 Share

Recommended Posts

I have a problem with innerHTML being asynchronous in someway.1: I write a <table> using innerHTML =2: Then I write the cells using innerHTML += in a loop3: And last I write the </table> to close it using innerHTML +=.The problem is that the output is like this:1 first, then 3, and last all the cells in 2.So that the table start and close is written first then the table cells.I'm going to create a simple and cut down example to test out with. So until then I have no examples. But if anyone have an idea what could be wrong I appreciate it.TIA!, MacGoose

Link to comment
Share on other sites

we would have no idea where to start unless we saw some code. my guess is the table is being incorrectly written with the loop. oh, and innerHTML doesn't really have anything to do with asynchronicity.

Link to comment
Share on other sites

something similar to this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function insertableandcells(){document.getElementById("table_container").innerHTML="<table border='1' cellspacing='0' cellpadding='0' id='mytable'></table>";for(i=0;i<4;i++){document.getElementById("mytable").innerHTML+="<tr><td>cell"+(i+1)+"</td><td>cell"+(i+2)+"</td><td>cell"+(i+3)+"</td><td>cell"+(i+4)+"</td></tr>";}}window.onload=insertableandcells;/*--*//*]]>*/</script> <style type="text/css"></style></head><body><div id="table_container"></div> </body></html>

Edit: does not work in IE as usual, so you will have to create these elements (including tbody, for IE) and append, i have done this before, i just have to find the code.

Edited by dsonesuk
Link to comment
Share on other sites

I cannot recommend innerHTML for the creation of table rows and table cells. DO use it to populate a table cell. The following methods are correct and work everywhere:http://www.w3schools.com/jsref/met_table_insertrow.asphttp://www.w3schools.com/jsref/met_tablerow_insertcell.aspThe tryit example here shows all three techniques at work: http://www.w3schools.com/js/tryit.asp?file...table_insertrowRemember that if you do not explicitly create a tbody element, your browser might do it for you. This can lead to parent-child confusion if you do not expect it. The good news is that table methods also work for tbody elements.

Edited by Deirdre's Dad
Link to comment
Share on other sites

something similar to this?Edit: does not work in IE as usual, so you will have to create these elements (including tbody, for IE) and append, i have done this before, i just have to find the code.
Thanx guys! This is actually the example I will use for now. Now it works so even if I had some strange errors before they are gone now. Using insert table rows and cells looks nice, and maybe it's they way to do it even though I can't see why. So I will insert the entire row with values as it is fast when I go with thousands of rows..., MacGoose
Link to comment
Share on other sites

where are you getting your data from? You could use loops instead of writing out thousands of lines of code. Personally I would use the methods DD is advocating, especially if you plan on displaying a list of data. That is what those methods were made for.

Link to comment
Share on other sites

here's adjusted code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function insertableandcells(){var table_con = document.getElementById("table_container");var table = document.createElement('TABLE');table.setAttribute("cellSpacing","0");table.setAttribute("cellPadding","0");table.setAttribute("border","1");table.id='mytablebody';table_con.appendChild(table);var tbody= document.createElement('TBODY'); //required for IEvar tr, td;table.appendChild(tbody);var trloop=4; //number of rowsvar tdloop=4; //number of cellsfor(i=0;i<trloop;i++){tr = document.createElement('tr');tbody.appendChild(tr);for(j=0;j<tdloop;j++){td = document.createElement('td');td.innerHTML="cellNo"+(j+1);tr.appendChild(td);}}}window.onload=insertableandcells;/*--*//*]]>*/</script> <style type="text/css"></style></head><body><div id="table_container"></div> </body></html>

Link to comment
Share on other sites

where are you getting your data from? You could use loops instead of writing out thousands of lines of code. Personally I would use the methods DD is advocating, especially if you plan on displaying a list of data. That is what those methods were made for.
I am using a loop. I'm looping the creation of tablerows. And I'm getting my data throught mysql and php. Maybe I will look into other methods later, but for now it will do..., MacGoose
Link to comment
Share on other sites

To clarify the original issue, if you have code like this:

var theDiv = document.getElementById('theDiv');theDiv.innerHTML = '<table>';// write tr and td elements to the innerHTMLtheDiv.innerHTML += '</table>';

When you edit the innerHTML the first time and add the <table>, the browser is going to add a complete table element. It's going to add <table><thead></thead><tbody></tbody></table>. If you want to generate a large string of HTML to add to an element, generate the string first and then set the innerHTML to it all at once. That's much more efficient than telling the browser to continually update the page in a loop or something.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...