using innerHTML to add page elements over appendChild
So i have been having real trouble with IE 7 and javascript. I was creating elements and appending these elements on the page.
IE was having a problem accepting the elements and was full of errors.
I got around this by simply creating one element and applying new elements within the innerHTML property.
For example:
div.innerHTMl = "<table><tr><td>this is innerHTML</td></tr></table>";rather than doing:
var table = document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
table.appendChild(td);
div.appendChild(table);What i want to know if you think using my solution is ok or i should really be creating elements and appending them?
decibel.places posted this at 21:42 — 29th March 2009.
He has: 1,494 posts
Joined: Jun 2008
Hi Ben,
I depends on your situation.
Using the innerHTML property is handy for changing the content of an element on load or dynamically - but it assumes that the element has been created with HTML; the table always exists in the document.
(note: your code
div.innerHTMlis not well-formed: the "L" should be capitalized, and this code will only work if you add an id to a div:<div id="div"></div>- but I would not recommend using "div" for the id... typically the innerHTML property is accessed as follows:document.getElementById('mydiv').innerHTML = "<table><tr><td>this is innerHTML</td></tr></table>";)Creating the elements and appending them is a good method to use when the table may or may not exist depending on some programmatic condition, so it is not even created unless used. I think you still need to assign the content of the cell with the innerHTML property...
Another question is why are you creating a one row one column table within a div? You can just put your text in the div...
benf posted this at 13:32 — 31st March 2009.
They have: 426 posts
Joined: Feb 2005
Hi Ben,
What i have done above is just for demonstration purposes. I have many more rows and more text and images to insert.
Are there any compatibility problems with innerHTMl as apposed to createElement or vise verser?
Good Value Professional VPS Hosting
greg posted this at 13:38 — 31st March 2009.
He has: 1,581 posts
Joined: Nov 2005
benf posted this at 23:33 — 31st March 2009.
They have: 426 posts
Joined: Feb 2005
Yes looks like it?? Anyway got this to work using createElement. What i didnt realise is that IE needs a tbody in the table otherwise it will show nothing!
Good Value Professional VPS Hosting
decibel.places posted this at 02:28 — 1st April 2009.
He has: 1,494 posts
Joined: Jun 2008
Yet another good argument against using tables for layout (unless you are presenting tabular data)
I would say that innerHTML (remember the capital L!) is a good choice for dynamic techniques after the page loads, but constructing the elements with JS or standard HTML is better at the time of the page rendering.
Note also that assigning the innerHTML after the page loads could result in a delay in displaying the content, depending on the amount of code being executed.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.