Path: csiph.com!usenet.pasdenom.info!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Best way to show create different elements dynamically
Date: Sun, 05 Jul 2015 13:16:16 +0200
Organization: PointedEars Software (PES)
Lines: 121
Message-ID: <5889831.4kO5l0emlv@PointedEars.de>
References: <%t_lx.191314$1K1.45828@fx06.am4> <Tx_lx.191315$1K1.88992@fx06.am4> <mnaomg$l33$1@dont-email.me> <359025142.IYVrofH7X8@PointedEars.de> <mnau4c$5dg$1@dont-email.me>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1436095152 23035 eJwNwokRwCAMA7CVCHEMHSfv/iOUk0wpzAMaYfMgYnfIkvLQlb6Lm8BF9Zz2q/PFU9Jkjv8pHBHp (5 Jul 2015 11:19:12 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Sun, 5 Jul 2015 11:19:12 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwFwYEBwCAIA7CXRmkBzxGV/09YIg+LkwwFNZpTKDLRg9uBexr5ff76dvlYm+O5xHTUzkvPsSBcez2q1w9HNRTL
Cancel-Lock: sha1:SnnNVYDEKDRO2Ks/5yQd8W7Z1CU=
X-NNTP-Posting-Host: eJwNyckBwCAIBMCWuBalHDDZ/kvQ+Q48Nc+KRAYINpXZkDExP6OiqI8e4y9qR66QarcX/LfxAhXaEIw=
Xref: csiph.com comp.lang.javascript:28280

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.