swapping or moving divs

Discussion in 'Javascript' started by gimme_this_gimme_that@yahoo.com, Mar 16, 2007.

  1. Guest

    Suppose I have:

    <div id="d1">
    asdfas
    </div>

    <div id="d2">
    asdfasf asdf
    </div>

    <input name="clickme" value="clickme" onclick="show_d1_in_div_2()"/>

    What is code for the javascript function "show_d1_in_d2()" that
    displays the contents of d1 in d2 when clickme is clicked?

    Thanks.
    , Mar 16, 2007
    #1
    1. Advertising

  2. Ivo Guest

    <> gave us
    > Suppose I have:
    >
    > <div id="d1">
    > asdfas
    > </div>
    >
    > <div id="d2">
    > asdfasf asdf
    > </div>
    >
    > <input name="clickme" value="clickme" onclick="show_d1_in_div_2()"/>
    >
    > What is code for the javascript function "show_d1_in_d2()" that
    > displays the contents of d1 in d2 when clickme is clicked?


    You realize that you end with duplicate d1's, don't you, as your brief sais
    nothing about hiding the original d1 and this example uses the cloneNode
    method, which really does nothing other than clone the node. The
    insertBefore method takes a second parameter allowing you to specify where
    to insert the new element. If you replace "null" with "d2.firstChild", the
    cloned node appears before the first child in d2. There is really nothing to
    be surprised about here.

    function show_d1_in_d2() {
    var d1 = document.getElementById( 'd1' );
    var d2 = document.getElementById( 'd2' );
    d2.insertBefore( d1.cloneNode( true ), null );
    }

    > Thanks.


    You 're welcome.
    ivo
    http://www.yorick.onlyfools.com/
    Ivo, Mar 16, 2007
    #2
    1. Advertising

  3. Guest

    Thanks Ivo,

    In my actual code I'm hiding a bunch of divs and then making one of
    them visible at one spot on the page depending upon a onchange event.

    I wanted to keep my example simple to get what I needed, which you
    kindly provided:

    d2.insertBefore( d1.cloneNode( true ), null );

    Again Thanks.

    Just what I needed.
    , Mar 16, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. rich
    Replies:
    0
    Views:
    714
  2. Gernot Frisch

    Moving DIVs?

    Gernot Frisch, Apr 22, 2004, in forum: Javascript
    Replies:
    2
    Views:
    167
    Gernot Frisch
    May 3, 2004
  3. maya
    Replies:
    4
    Views:
    230
  4. maya

    swapping divs...

    maya, Nov 14, 2007, in forum: Javascript
    Replies:
    4
    Views:
    144
  5. maya
    Replies:
    4
    Views:
    135
Loading...

Share This Page