Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28280

Re: Best way to show create different elements dynamically

Show key headers only | View raw

danca wrote:

> Il 07/05/2015 10:22 AM, Thomas 'PointedEars' Lahn ha scritto:
>> danca wrote:
>>> Example: (create a div, then set some properties)
>>>
>>> var aDiv=document.createElement('div')
>>> aDiv.style.position="fixed"
>>
>> It is customary and recommended to use whitespace to separate tokens.
>> It is recommended to use a consistent quoting style.
> 
> And I don't get this, too. I'm using Thunderbird on Linux and the
> quoting is automatic and seems to me just the same it was under
> Windows... Can you be more specific?

I mean your *code* style.  The first statement should be self-explanatory 
onec you read my correction.

As for the second one: You are using <'> as string delimiter in one line and 
<"> in the next one.  That is inconsistent and should not happen.  One 
reason is that it makes code harder to maintain as it requires regular 
expressions for search and/or replace.

I recommend to use <"> for delimiting string literals always unless there 
are valid reasons not to.  The reason for that is that the double-quote 
character is better visible with several fonts that the straight apostrophe.  
One valid reason for an exception is that the string value contains one or 
more <">; in that case using <'> as delimiter avoids the need for escaping 
the <">.  One example for that is generating HTML with document.write() 
(which is blocking, avoid this if possible) or “innerHTML”: I prefer the 
resulting markup with <"> as attribute delimiters, not least because I find 
straight apostrophes in attribute values more common than straight double-
quote characters (although you need to guard against that in any case, and 
the typographically correct characters would not be the straight ones).

Also, you should always guard against the possibility that the element 
object could not be created:

  var aDiv = document.createElement("div");
  if (aDiv)
  {
    aDiv.style.position = "fixed";
  }

>>> You can nest other elements into the element created (but still not
>>> visible nor present in your document):
>>>
>>> info.appendChild(lbl)
>>> aDiv.appendChild(info)
>>>
>>> And now append the div to the document:
>>>
>>> document.body.appendChild(aDiv)
>>
>> Good advice at last.  The reason for this order is that it prevents
>> reflow/repaint in case of a race condition.  But it is still not more
>> compatible or efficient with *tables*:
>>
>> <http://www.quirksmode.org/dom/innerhtml.html>
> 
> Interesting. Anyway, I was not concerned by any means about performance.
> And that page should be updated, it is really old stuff.

There is a pseudo-link attached to each benchmark which you can run.  I have 
run the tests 5 times each in Chromium “43.0.2357.130 Built on Debian 
stretch/sid, running on Debian stretch/sid (64-bit)”.  The “innerHTML” 
approach to building tables is still the fastest one there.

What surprises me is that the “innerHTML” approach that uses appending 
string concatenation –

	var string = '<table><tbody>';
	for (var i=0;i<50;i++)
	{
		string += '<tr>';
		for (var j=0;j<50;j++)
		{
			string += '<td>*</td>';
		}
		string += '</tr>';
	}
	string += '</tbody></table>';
	document.getElementById('writeroot').innerHTML = string;

– is indeed faster than the one that uses Array.prototype.push() –

	var string = new Array();
	string.push('<table><tbody>');
	for (var i=0;i<50;i++)
	{
		string.push('<tr>');
		for (var j=0;j<50;j++)
		{
			string.push('<td>*</td>');
		}
		string.push('</tr>');
	}
	string.push('</tbody></table>');
	var writestring = string.join('');
	document.getElementById('writeroot').innerHTML = writestring;

–, even though the latter method is a built-in, in that browser version.
Perhaps this has to do with the shortness of the strings as I remember 
having read of a benchmark that showed that appending string concatenation 
gets less efficient the longer the strings are, while the reverse is true 
for Array.prototype.push().

(Blame PPK for the tabs.)

> BTW isn't innerHTML generally discouraged?

*Apparently* not.
 
Please get a *real* name.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 01:02 +0100
  Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 01:06 +0100
    Re: Best way to show create different elements dynamically Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 09:27 +0200
      Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 10:04 +0100
    Re: Best way to show create different elements dynamically danca <cyberdanny@tiscalinet.it> - 2015-07-05 10:10 +0200
      Re: Best way to show create different elements dynamically Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 10:22 +0200
        Re: Best way to show create different elements dynamically danca <cyberdanny@tiscalinet.it> - 2015-07-05 11:43 +0200
          Re: Best way to show create different elements dynamically Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 13:16 +0200
            Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 12:48 +0100
            Re: Best way to show create different elements dynamically danca <cyberdanny@tiscalinet.it> - 2015-07-05 14:47 +0200
              Re: Best way to show create different elements dynamically Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 16:03 +0200
                Re: Best way to show create different elements dynamically danca <cyberdanny@tiscalinet.it> - 2015-07-05 19:53 +0200
                Re: Best way to show create different elements dynamically Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-06 01:46 +0200
                Re: Best way to show create different elements dynamically "danca (Daniele Campagna)" <cyberdanny@tiscalinet.it> - 2015-07-06 07:29 +0200
        Re: Best way to show create different elements dynamically Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2015-07-05 13:17 +0200
    Re: Best way to show create different elements dynamically "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-05 10:38 +0200
      Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 10:01 +0100
      Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 10:11 +0100
        Re: Best way to show create different elements dynamically Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 11:17 +0200
        Re: Best way to show create different elements dynamically "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-05 11:26 +0200
          Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 10:30 +0100
          Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 10:33 +0100
            Re: Best way to show create different elements dynamically "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-05 12:29 +0200
              Re: Best way to show create different elements dynamically danca <cyberdanny@tiscalinet.it> - 2015-07-05 12:38 +0200
                Re: Best way to show create different elements dynamically "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-05 17:33 +0200
                Re: Best way to show create different elements dynamically danca <cyberdanny@tiscalinet.it> - 2015-07-05 18:55 +0200
                Re: Best way to show create different elements dynamically "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-05 19:44 +0200
                Re: Best way to show create different elements dynamically danca <cyberdanny@tiscalinet.it> - 2015-07-05 20:42 +0200
                Re: Best way to show create different elements dynamically "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-07-05 21:01 +0200
              Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 13:00 +0100
                Re: Best way to show create different elements dynamically Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-07-05 16:13 +0200
                Re: Best way to show create different elements dynamically Tim Streater <timstreater@greenbee.net> - 2015-07-05 15:23 +0100
                Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 15:57 +0100
  Re: Best way to show create different elements dynamically JiiPee <no@notvalid.com> - 2015-07-05 10:03 +0100

csiph-web