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

Groups > comp.lang.javascript > #29050 > unrolled thread

Difference between innerHTML and appendChild

Back to article view | Back to comp.lang.javascript

Contents

  Difference between innerHTML and appendChild bit-naughty@hotmail.com - 2015-12-28 08:54 -0800
    Difference between innerHTML and appendChild Ram Tobolski <ramtob@gmail.com> - 2015-12-28 10:54 -0800
    Re: Difference between innerHTML and appendChild Aleksandro <aleksandro@gmx.com> - 2015-12-28 17:06 -0300
      Re: Difference between innerHTML and appendChild Gregor Kofler <usenet@gregorkofler.com> - 2015-12-28 21:20 +0100
        Re: Difference between innerHTML and appendChild Tim Streater <timstreater@greenbee.net> - 2015-12-28 20:45 +0000
          Re: Difference between innerHTML and appendChild Gregor Kofler <usenet@gregorkofler.com> - 2015-12-28 23:46 +0100
          Re: Difference between innerHTML and appendChild Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2015-12-29 22:18 +0100

#29050 — Difference between innerHTML and appendChild

From what I know, both innerHTML and appendChild put stuff INTO the browser's current page - but if I appendChild(), is that *visible* straightaway? Or does it get put into the DOM tree, but is not *shown* straightaway...? Can anyone please explain?

Thanks.

[toc] | [next] | [standalone]

#29055

Yes, appendChild is immediately rendered.

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_node_appendchild

innerHTML works with HTML i.e. code, as a string. appendChild works with objects, the entities "behind" the code.

[toc] | [prev] | [next] | [standalone]

#29056

On 28/12/15 13:54, bit-naughty@hotmail.com wrote:
> From what I know, both innerHTML and appendChild put stuff INTO the browser's current page - but if I appendChild(), is that *visible* straightaway? Or does it get put into the DOM tree, but is not *shown* straightaway...? Can anyone please explain?

Yes.

[toc] | [prev] | [next] | [standalone]

#29057

Am 2015-12-28 um 21:06 schrieb Aleksandro:
> On 28/12/15 13:54, bit-naughty@hotmail.com wrote:
>> From what I know, both innerHTML and appendChild put stuff INTO the browser's current page - but if I appendChild(), is that *visible* straightaway? Or does it get put into the DOM tree, but is not *shown* straightaway...? Can anyone please explain?
> 
> Yes.
> 
Great. Let's hear it. The explanation.

[toc] | [prev] | [next] | [standalone]

#29058

In article <n5s5e3$ttt$2@dont-email.me>, Gregor Kofler
<usenet@gregorkofler.com> wrote:

>Am 2015-12-28 um 21:06 schrieb Aleksandro:
>> On 28/12/15 13:54, bit-naughty@hotmail.com wrote:
>>> From what I know, both innerHTML and appendChild put stuff INTO the
>>> browser's current page - but if I appendChild(), is that *visible*
>>> straightaway? Or does it get put into the DOM tree, but is not *shown*
>>> straightaway...? Can anyone please explain?
>> 
>> Yes.
>> 
>Great. Let's hear it. The explanation.

appendChild adds one element to the DOM. innerHTML will typically be
some html that will be parsed and turned into a small element tree
(depending how complex your innerHTML is). That will then be added to
the DOM. The parsing process will do its best to correct errors in the
supplied html, if any.

When these are rendered and displayed is another question altogether.

-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[toc] | [prev] | [next] | [standalone]

#29059

Am 2015-12-28 um 21:45 schrieb Tim Streater:
> In article <n5s5e3$ttt$2@dont-email.me>, Gregor Kofler
> <usenet@gregorkofler.com> wrote:
> 
>> Am 2015-12-28 um 21:06 schrieb Aleksandro:
>>> On 28/12/15 13:54, bit-naughty@hotmail.com wrote:
>>>> From what I know, both innerHTML and appendChild put stuff INTO the
>>>> browser's current page - but if I appendChild(), is that *visible*
>>>> straightaway? Or does it get put into the DOM tree, but is not *shown*
>>>> straightaway...? Can anyone please explain?
>>>
>>> Yes.
>>>
>> Great. Let's hear it. The explanation.
> 
> appendChild adds one element to the DOM. innerHTML will typically be
> some html that will be parsed and turned into a small element tree
> (depending how complex your innerHTML is). That will then be added to
> the DOM. The parsing process will do its best to correct errors in the
> supplied html, if any.
> 
> When these are rendered and displayed is another question altogether.
> 

I know. I found Aleksandro's just a bit on the ...brief and confusing side.

[toc] | [prev] | [next] | [standalone]

#29066

Tim Streater wrote:

> […] Gregor Kofler […] wrote:
>> Am 2015-12-28 um 21:06 schrieb Aleksandro:
>>> On 28/12/15 13:54, bit-naughty@hotmail.com wrote:
>>>> From what I know, both innerHTML and appendChild put stuff INTO the
>>>> browser's current page - 

Not necessarily.  They do that only if the owner element already is part of 
the *rendered* document (which is something to be avoided since it causes 
reflow).

>>>> but if I appendChild(), is that *visible* straightaway? Or does it get
>>>> put into the DOM tree, but is not *shown* straightaway...? Can anyone
>>>> please explain?
>>> Yes.
>> Great. Let's hear it. The explanation.
> 
> […]
> When these are rendered and displayed is another question altogether.

But *that* was the OP’s question, the *first* question at any rate.

Neither of those questions was smart, though, since an “or” question is a 
bad idea to begin with, and instead of asking the OP could and should simply 
have tried (and refrained from asking if anyone could explain).  Therefore, 
this logically correct answer :)

<http://www.catb.org/~esr/faqs/smart-questions.html>

HTH

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web