Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

InnerHTML - fast or slow? 3

Status
Not open for further replies.
Punchinello

Punchinello

Programmer
Apr 25, 2003
116
0
0
US
HTML Gurus,

I am new to html and I'm going to use <div id="custid">Some customer id</div> on a local html page and fill it with innerHTML on the DocumentComplete event. It is not a server-based application - this code runs on a fat client.

But wait.

It is not just the customer id. It is a whole bunch of fields that have to be populated like this. So my question is, if I use a bunch of statements like this: document.getElementById('custid').innerHTML = some value will my webbrowser flicker with each change on slow machines?

Might it be better to assign the body.innerHTML to a string, manipulate the string, and assign it back to the body.innerHTML all at once?
 
Sort by date Sort by votes

Unless we're talking a 286 here... Or 100+ DIVs (or so), then you should be fine with no flicker.

In fact, when creating about 2000+ DIVs, I found that using innerHTML to create them was by far faster than using the relevant DOM methods and adding to the document - something browser manufacturers might want to take heed of it they want anyone to use these DOM over Microsoft's innerHTML.

Hope this helps,
Dan
 
Upvote 0 Downvote
Hey, I have dusty IMB 386SX/12 laptop... innerHTML won't work on lynx :)

IMO for populating fields innerText is better - faster and performs HTML entity encoding.

 
Upvote 0 Downvote
Thanks guys, and on a related question:

My understanding is that innerHTML works with any id on a tag with opening and closing elements. In using <div> with multiple fields in a <td> cell, the second element breaks to a new line. I'm able to avoid this by using <q id="something"></q> instead with no apparent side-effects. I don't want the code to confuse future programmers (like "why didn't he use <div>? must be a novice.") but I don't want it to line break either.

Any suggestions?
 
Upvote 0 Downvote
vongrunt,

I had difficulty using .innerText with Netscape (7).
Do you or anyone happen to know if it is supported ?

I had to pretty much just stick with .innerHTML in order to make it work on both IE & NN, even though it was usually just text I was trying to change.
 
Upvote 0 Downvote
Well, since everyone else got stars, I'm forced to provide an example :)

After it loads, click on the two words INNERTEXT and INNERHTML. The INNERTEXT word will not change. Comments ?

Code: 
<html>
<head>
<title>test</title>

<SCRIPT LANGUAGE="JavaScript"><!-- 

function chgtext1() {
document.getElementById('id_1').innerText = 'CHANGED!' }

function chgtext2() {
document.getElementById('id_2').innerHTML = 'CHANGED!' }

 // --></script>

</head>
<body >

<table>
 <tr>
   <td id='id_1' onclick="chgtext1()">INNERTEXT</td>
 </tr>
 <tr>
   <td id='id_2' onclick="chgtext2()">INNERHTML</td>
 </tr>
 
</table>

</body>
</html>
 
Upvote 0 Downvote

Aaah... It is not that NN7 doesn't support innerText, but that it doesn't suport innerText for a TD tag. If yo umove the IDs to a SPAN instead:

Code: 
<td><span id="id_1" onclick="chgtext1()">INNERTEXT</span></td>

Then all works as expected.

Hope this helps,
Dan


 
Upvote 0 Downvote
I added two new rows, "INNERTEXT w/SPAN", and "INNERHTML w/SPAN" , the latter works, the former doesn't (with NN7).
With IE, when all four rows are clicked, all four change.
With NN7, only the innerHTML items change. I don't think NN7 supports innerText.

Code: 
<html>
<head>
<title>test</title>
<SCRIPT LANGUAGE="JavaScript"><!-- 

function chgtext1() {
document.getElementById('id_1').innerText = 'CHANGED!' }

function chgtext2() {
document.getElementById('id_2').innerHTML = 'CHANGED!' }

function chgtext3() {
document.getElementById('id_3').innerText = 'CHANGED!' }

function chgtext4() {
document.getElementById('id_4').innerHTML = 'CHANGED!' }

 // --></script>

</head>
<body >

<table>
 <tr>
   <td id='id_1' onclick="chgtext1()">INNERTEXT</td>
 </tr>
 <tr>
   <td id='id_2' onclick="chgtext2()">INNERHTML</td>
 </tr>

 <tr>
   <td><span id="id_3" onclick="chgtext3()">INNERTEXT w/SPAN</span></td>
 </tr>
 <tr>
   <td><span id="id_4" onclick="chgtext4()">INNERHTML w/SPAN</span></td>
 </tr>
 
</table>

</body>
</html>
 
Upvote 0 Downvote
As far as I remember, MSDN says both innerHTML and innerText are proprietary ("... no public standard").

Mozilla/Gecko-based browsers support innerHTML - their specs say "DOM Level 0. Not part of specification" - but not innerText.
 
Upvote 0 Downvote
My suspicions about innerText were correct then.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

c0deM0nK424
  • Locked
  • Question
Using 'novalidate' to turn off browser built in form validation - good thing or bad ? 2
Replies
2
Views
50
1DMF
1DMF
pendle666
  • Locked
  • Question
link or button for going back to previous page - but to the link originally clicked
Replies
5
Views
122
audiopro
audiopro
1DMF
  • Locked
  • Question
ie not applying invalid psuedo class on checkValidity or exiting form field
Replies
1
Views
27
1DMF
1DMF
notsoevilgenius
  • Locked
  • Question
PHP page loads slowly and always needs to be refreshed before loading correctly.
Replies
5
Views
76
notsoevilgenius
notsoevilgenius
ThomasJSmart
  • Locked
  • Question
XHTML or XML for SEO ?
Replies
11
Views
64
ChrisHunt
ChrisHunt

Part and Inventory Search

Sponsor

Back
Top