div, appenChild and br

Discussion in 'Javascript' started by 0m4r, Apr 26, 2007.

  1. 0m4r

    0m4r Guest

    Good Morning everybody
    I'm gonna to be crazy about, maybe, a stupid Javascript problem.
    What I would like to code is a javascript script to obtain something
    like this:

    <div>
    <span>title: the title</span>
    <br/>
    <span>link: the link</span>
    </div>

    the script I'm using is reported below, but it seems to not work
    because it don't give me the the two span elements on the same line
    (and isn't what I want...)

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

    span.appendChild(document.createTextNode("title: " + title))
    div.appendChild(br);
    div.appendChild(span);
    span.appendChild(document.createTextNode("link: " +
    link));
    div.appendChild(br);
    div.appendChild(span);


    Where I'm wrong? Could anybody to help me?

    thx a lot,
    Omar
    0m4r, Apr 26, 2007
    #1
    1. Advertising

  2. 0m4r

    RobG Guest

    On Apr 27, 3:05 am, 0m4r <> wrote:
    > Good Morning everybody
    > I'm gonna to be crazy about, maybe, a stupid Javascript problem.
    > What I would like to code is a javascript script to obtain something
    > like this:
    >
    > <div>
    > <span>title: the title</span>
    > <br/>
    > <span>link: the link</span>
    > </div>
    >
    > the script I'm using is reported below, but it seems to not work
    > because it don't give me the the two span elements on the same line
    > (and isn't what I want...)


    That doesn't make sense. What will happen is that the two text nodes a
    appended one after the other to the same span, since you only create
    one. Your code then shuffles the span and br elements because you
    only create one of each.

    >
    > var br = document.createElement("br");
    > var span = document.createElement("span");
    > var div = document.createElement("div");
    >
    > span.appendChild(document.createTextNode("title: " + title))


    That appends a text node to the span.

    > div.appendChild(br);


    That appends the br to the div.

    > div.appendChild(span);


    and the span after the br.

    > span.appendChild(document.createTextNode("link: " +
    > link));


    Now you append another text node to the span.

    > div.appendChild(br);


    That moves the br to after the span.

    > div.appendChild(span);


    That moves the span to after the br.

    >
    > Where I'm wrong? Could anybody to help me?


    If you want two spans, you have to create two spans. After adding the
    first span to the div, make another, then append the second text node
    to that. If you want more than one br, make more but I think you only
    need one.

    Don't forget feature detection:

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

    span.appendChild(document.createTextNode("title: " + title))
    div.appendChild(span);
    div.appendChild(document.createElement('br'));

    // Make another span
    span = document.createElement("span");
    span.appendChild(document.createTextNode("link: " + link));
    div.appendChild(span);


    --
    Rob
    RobG, Apr 27, 2007
    #2
    1. Advertising

  3. 0m4r

    Cah Sableng Guest

    On Apr 27, 6:37 am, RobG <> wrote:

    <snip>

    > If you want more than one br, make more but I think you only
    > need one.


    No. Always create br when you need it. At least IE6 and FF1.5 need the
    new one.

    <snip>
    Cah Sableng, Apr 27, 2007
    #3
  4. 0m4r

    RobG Guest

    On Apr 27, 11:57 am, Cah Sableng <> wrote:
    > On Apr 27, 6:37 am, RobG <> wrote:
    >
    > <snip>
    >
    > > If you want more than one br, make more but I think you only
    > > need one.

    >
    > No.


    No what?

    > Always create br when you need it. At least IE6 and FF1.5 need the
    > new one.


    Need? According to the OP's sample HTML, only one is required. Why
    are two needed for IE an Firefox?

    --
    Rob
    RobG, Apr 27, 2007
    #4
  5. 0m4r

    Cah Sableng Guest

    On Apr 27, 12:59 pm, RobG <> wrote:
    > On Apr 27, 11:57 am, Cah Sableng <> wrote:
    >
    > > On Apr 27, 6:37 am, RobG <> wrote:

    >
    > > <snip>

    >
    > > > If you want more than one br, make more but I think you only
    > > > need one.

    >
    > > No.

    >
    > No what?
    >
    > > Always create br when you need it. At least IE6 and FF1.5 need the
    > > new one.

    >
    > Need? According to the OP's sample HTML, only one is required. Why
    > are two needed for IE an Firefox?
    >


    var br = document.createElement('br');

    span.appendChild(document.createTextNode("title: " + title))
    div.appendChild(span);
    //div.appendChild(document.createElement('br'));
    div.appendChild(br);

    // Make another span
    span = document.createElement("span");
    span.appendChild(document.createTextNode("link: " + link));
    div.appendChild(span);
    //div.appendChild(document.createElement('br'));
    div.appendChild(br);

    // Make another span
    span = document.createElement("span");
    span.appendChild(document.createTextNode("link: " + link));
    div.appendChild(span);

    On IE6 and FF1.5, code above gives me :
    title: xxlink: yy
    link: yy

    But when I use fresh line break element, I get :
    title: xx
    link: yy
    link: yy

    So my conclusion is *always* make new br element before insertion.
    I don't know how it behaves on newer browser.

    OP's case is just 2 lines. So it won't make difference.
    I tested on 3 lines. My code failed.
    Cah Sableng, Apr 27, 2007
    #5
    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. Kate
    Replies:
    4
    Views:
    620
  2. Kate
    Replies:
    1
    Views:
    439
    Oli Filth
    Feb 19, 2005
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    724
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    176
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    296
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page