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 10:22:41 +0200
Organization: PointedEars Software (PES)
Lines: 51
Message-ID: <359025142.IYVrofH7X8@PointedEars.de>
References: <%t_lx.191314$1K1.45828@fx06.am4> <Tx_lx.191315$1K1.88992@fx06.am4> <mnaomg$l33$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 1436084737 17969 eJwFwYEBwCAIA7CXBNuC5wyU/09Ywi1TB0SBw4n0h2yHbn151BcbVq6xdYyFvoaXy8M7RvwBDyAQdg== (5 Jul 2015 08:25:37 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Sun, 5 Jul 2015 08:25:37 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwNwocRwDAIBLCVgDdtHJuy/wjJSQpjKz+mdnR/6PTgG4DtdPZdemQkk3AIZStXvIONUt+Uay7ssiUz4/gAQMYVFg==
Cancel-Lock: sha1:WVyN1UDfMVsXttbz6ozISe/iNNo=
X-NNTP-Posting-Host: eJwFwQcBwEAIBDBLzIPKoQz/Ej5xBaPD4DA/v6nIjjYjuLLT7PXOX9j9NI6EwDxR0pKdGQ8l1BEy
Xref: csiph.com comp.lang.javascript:28265

danca wrote:

> Il 07/05/2015 02:06 AM, JiiPee ha scritto:
>>> I use javascript to first create <p>-text lines inside a div (using
>>> innerHTML). Then after that text I would like to show a table
>>> (<table>). What is the best way to do this? […]
> 
> I think you should investigate document.createElement() and
> document.appendChild() to manipulate the DOM instead of using innerHTML.

I think you should do some tests before giving advice. Including benchmarks.

> 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.
It is customary and recommended to end simple statements with a semicolon.

  var aDiv = document.createElement("div");
  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>

> […]
> Look also to firstChild(), replaceChild(), removeChild ecc.

There is no “firstChild” method, and no “removeChild” *non-callable* 
property.

-- 
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.