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

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

Dom node creation?

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

Contents

  Dom node creation? Tuxedo <tuxedo@mailinator.com> - 2013-09-24 22:49 +0200
    Re: Dom node creation? Danny <dann90038@gmail.com> - 2013-09-24 15:17 -0700
      Re: Dom node creation? Tuxedo <tuxedo@mailinator.com> - 2013-09-25 00:51 +0200
        Re: Dom node creation? "J.R." <groups_jr-1@yahoo.com.br> - 2013-09-24 16:08 -0700

#21421 — Dom node creation?

Can someone advise me how to add dom nodes dynamically with javascript?

I'd like to add the elements as part of a function call via an onclick 
action, after a page has loaded, e.g.:
<a href=".." onclick="share_icons();">Share icons</a>.

These are the elements that need to appear onclick:

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>

So it's a div with two classes, holding four <a> tags with classes and some 
'fb' and 'pi' stuff (facebook and pinterest) in two of them.

The div makes up various social content sharing buttons via addthis.com.

I guess the procedure would begin something like:

var div = document.createElement("div");
...

function share_icons(){
document.body.appendChild(div);
...

}

I'm a bit unfamiliar with the dom node creation syntax.

Many thanks for any pointers!

Tuxedo

[toc] | [next] | [standalone]

#21422

Tuxedo 
http://stackoverflow.com/questions/2895318/appendchild-createelement

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

#21423

Danny wrote:

> Tuxedo
> http://stackoverflow.com/questions/2895318/appendchild-createelement

Thanks, that link answered my questions perfectly!

Tuxedo

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

#21425

On 24 sept 2013 19h51min18s UTC-3, Tuxedo wrote:
> Danny wrote:
> 
> 
> 
> > Tuxedo
> 
> > http://stackoverflow.com/questions/2895318/appendchild-createelement
> 
> 
> 
> Thanks, that link answered my questions perfectly!
> 

Take care with innerHTML. See the c.l.js FAQ, § 9.4:
<http://pointedears.de/scripts/faq/cljs/#updateContent>

and

When innerHTML isn’t Fast Enough
<http://blog.stevenlevithan.com/archives/faster-than-innerhtml>

[toc] | [prev] | [standalone]

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

csiph-web