By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,677 Members | 1,060 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,677 IT Pros & Developers. It's quick & easy.

div, appenChild and br

P: n/a
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

Apr 26 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
On Apr 27, 3:05 am, 0m4r <omar.adob...@gmail.comwrote:
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

Apr 26 '07 #2

P: n/a
On Apr 27, 6:37 am, RobG <r...@iinet.net.auwrote:

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

Apr 27 '07 #3

P: n/a
On Apr 27, 11:57 am, Cah Sableng <cahsabl...@gmail.comwrote:
On Apr 27, 6:37 am, RobG <r...@iinet.net.auwrote:

<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

Apr 27 '07 #4

P: n/a
On Apr 27, 12:59 pm, RobG <r...@iinet.net.auwrote:
On Apr 27, 11:57 am, Cah Sableng <cahsabl...@gmail.comwrote:
On Apr 27, 6:37 am, RobG <r...@iinet.net.auwrote:
<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.

Apr 27 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.