[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

Best way to show create different elements dynamically

John J. Hughes II

7/5/2015 12:02:00 AM

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? Should I somehow put a element (like a
div) at the last text place and then check its position and move the
table to that position? Or possible adding just table to that innerHTML
like I did with the text? I know there are several ways to do this, but
how people normally do this? thank you
33 Answers

John J. Hughes II

7/5/2015 12:06:00 AM

0

Does not need to be an example but just a hint or direction would be
enough ... I can search after that.

On 05/07/2015 01:02, JiiPee wrote:
> 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? Should I somehow put a
> element (like a div) at the last text place and then check its
> position and move the table to that position? Or possible adding just
> table to that innerHTML like I did with the text? I know there are
> several ways to do this, but how people normally do this? thank you

Thomas 'PointedEars' Lahn

7/5/2015 7:28:00 AM

0

JiiPee wrote:

| Reply-To: no@notvalid.com
| From: JiiPee <no@notvalid.com>

> Does not need to be an example but just a hint or direction would be
> enough ... I can search after that.
>
> [top post]

Your postings are inappropriate; read the FAQ.

@all: Caution. The Web site on the domain used for the pseudo-address
randomly redirects to other Web sites, including SMS/e-mail scam.

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

danca

7/5/2015 8:11:00 AM

0

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? Should I somehow put a
>> element (like a div) at the last text place and then check its
>> position and move the table to that position? Or possible adding just
>> table to that innerHTML like I did with the text? I know there are
>> several ways to do this, but how people normally do this? thank you
>

I think you should investigate document.createElement() and
document.appendChild() to manipulate the DOM instead of using innerHTML.
Example: (create a div, then set some properties)

var aDiv=document.createElement('div')
aDiv.style.position="fixed"
aDiv.style.width="100%"

You can nest other elements into the element created (but still not
visible nor present in your document):

var info=document.createElement("span")
info.className="infobar"
info.id="info"
var lbl=document.createElement("label")
lbl.className="bar"
lbl.id="title"

info.appendChild(lbl)
aDiv.appendChild(info)

And now append the div to the document:

document.body.appendChild(aDiv)

Look also to firstChild(), replaceChild(), removeChild ecc.

Dan

Thomas 'PointedEars' Lahn

7/5/2015 8:23:00 AM

0

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

> [â?¦]
> Look also to firstChild(), replaceChild(), removeChild ecc.

There is no â??firstChildâ? method, and no â??removeChildâ? *non-callable*
property.

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

Evertjan.

7/5/2015 8:38:00 AM

0

JiiPee <no@notvalid.com> wrote on 05 Jul 2015 in comp.lang.javascript:
> On 05/07/2015 01:02, JiiPee wrote:
>> 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?

"best way" Qs are a bit silly.

>> Should I somehow put a
>> element (like a div) at the last text place and then check its
>> position and move the table to that position?

No need for that.

>> Or possible adding just
>> table to that innerHTML like I did with the text? I know there are
>> several ways to do this, but how people normally do this? thank you

[please do not toppost]

> Does not need to be an example but just a hint or direction would be
> enough ... I can search after that.

While myDiv.appendChild() is "the" preferred way,

a simple and dirty:

myDiv.innerHTML += "<table>...</table>"

will often do a reasonable job.


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

John J. Hughes II

7/5/2015 9:01:00 AM

0

On 05/07/2015 09:38, Evertjan. wrote:
>> w people normally do this? thank you
> [please do not toppost]

ok, but that was only a small portion i posted over, so its not so bad
(everybody knows what happened there)?? :)

>> Does not need to be an example but just a hint or direction would be
>> enough ... I can search after that.
>
> While myDiv.appendChild() is "the" preferred way,
>
> a simple and dirty:
>
> myDiv.innerHTML += "<table>...</table>"

ok, but if the table has a lot of stuff is this a lot of work? The other
poster said not to use innerHTML. I dont know, thats why asked :).

>
> will often do a reasonable job.

ye I know that would do the job but just is there easier way?


>
>

John J. Hughes II

7/5/2015 9:04:00 AM

0

On 05/07/2015 01:02, JiiPee wrote:
> 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? Should I somehow put a
> element (like a div) at the last text place and then check its
> position and move the table to that position? Or possible adding just
> table to that innerHTML like I did with the text? I know there are
> several ways to do this, but how people normally do this? thank you

Just to clarify that this dynamical creation is done when the page
loads; I call this operation currently from onload-function.

John J. Hughes II

7/5/2015 9:05:00 AM

0

On 05/07/2015 08:27, Thomas 'PointedEars' Lahn wrote:
> JiiPee wrote:
>
> | Reply-To: no@notvalid.com
> | From: JiiPee <no@notvalid.com>
>
>> Does not need to be an example but just a hint or direction would be
>> enough ... I can search after that.
>>
>> [top post]
> Your postings are inappropriate; read the FAQ.
>
> @all: Caution. The Web site on the domain used for the pseudo-address
> randomly redirects to other Web sites, including SMS/e-mail scam.
>

ye I know, but it was only a small section I top posted, so is it so bad? :)

John J. Hughes II

7/5/2015 9:11:00 AM

0

On 05/07/2015 09:38, Evertjan. wrote:
> JiiPee <no@notvalid.com> wrote on 05 Jul 2015 in comp.lang.javascript:
>
> While myDiv.appendChild() is "the" preferred way,
>
> a simple and dirty:
>
> myDiv.innerHTML += "<table>...</table>"
>
> will often do a reasonable job.

Yes its a bit more simple (although takes a bit efford to add all <tr>,
<td> and <class> and other things)...I have not done so much js yet, so
as a programmer this might do the job this time as I would like to it
quickly (and maybe study the better was next time). Just wanted a
confirmation what way people normally use.

>
>

Thomas 'PointedEars' Lahn

7/5/2015 9:18:00 AM

0

JiiPee wrote:

> [â?¦] Just wanted a confirmation what way people normally use.

A million flies canâ??t be wrong?

Get a name and an e-mail address.

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