div, appenChild and br

[0m4r]

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

 

[RobG]

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

 

[Cah Sableng]

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>

 

[RobG]

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?

 

[Cah Sableng]

No what?


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.