473,662 Members | 2,536 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

div, appenChild and br

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.create Element("br");
var span = document.create Element("span") ;
var div = document.create Element("div");

span.appendChil d(document.crea teTextNode("tit le: " + title))
div.appendChild (br);
div.appendChild (span);
span.appendChil d(document.crea teTextNode("lin k: " +
link));
div.appendChild (br);
div.appendChild (span);
Where I'm wrong? Could anybody to help me?

thx a lot,
Omar

Apr 26 '07 #1
4 18714
On Apr 27, 3:05 am, 0m4r <omar.adob...@g mail.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.create Element("br");
var span = document.create Element("span") ;
var div = document.create Element("div");

span.appendChil d(document.crea teTextNode("tit le: " + 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.appendChil d(document.crea teTextNode("lin k: " +
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.create Element("div");
var span = document.create Element("span") ;

span.appendChil d(document.crea teTextNode("tit le: " + title))
div.appendChild (span);
div.appendChild (document.creat eElement('br')) ;

// Make another span
span = document.create Element("span") ;
span.appendChil d(document.crea teTextNode("lin k: " + link));
div.appendChild (span);
--
Rob

Apr 26 '07 #2
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
On Apr 27, 11:57 am, Cah Sableng <cahsabl...@gma il.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
On Apr 27, 12:59 pm, RobG <r...@iinet.net .auwrote:
On Apr 27, 11:57 am, Cah Sableng <cahsabl...@gma il.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.create Element('br');

span.appendChil d(document.crea teTextNode("tit le: " + title))
div.appendChild (span);
//div.appendChild (document.creat eElement('br')) ;
div.appendChild (br);

// Make another span
span = document.create Element("span") ;
span.appendChil d(document.crea teTextNode("lin k: " + link));
div.appendChild (span);
//div.appendChild (document.creat eElement('br')) ;
div.appendChild (br);

// Make another span
span = document.create Element("span") ;
span.appendChil d(document.crea teTextNode("lin k: " + 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
6910
by: Juliano Freitas | last post by:
Hello! i'm usin a DOM module to process a xml file. I'm having problems with the appenChild function. Why in my example below i can't append the child 'ele' into the swdb. <swdb> <visualinfo/> </swdb>
11
1854
by: DKM | last post by:
I have an empty tag like <p id="pid"></p> in a xml file. And, I have a script as foolows: str = "<b>Hello World!!!</b>"; ele = documeny.getElementById("pid"); ele.appendChild(document.createTextNode(str)); I expected to see "Hello World!!!" in bold letters, but instead I see "<b>Hello World!!!</b>".
2
1192
by: Lazy70 | last post by:
Hi, I have an html page P that contains a iframe I. In the same page i have two combobox, C1 and C2. I would to load data in combo C2 after a choice by user over C1. So I have created a jsp that get data from a DB and then build a page with javascript code to update C2. Foreach data I create an option with parent.document.createElement('option') and then with an appenChild I update C2.
5
1469
by: greenflame | last post by:
So I am trying to implement the following in DOM: document.write(str); I was wondering if the following would do it: document.createT­extNode(str);
3
1667
by: Marco Rizzi | last post by:
Hi all, i'm trying to add same node to XmlDocument. This is Xml that I want to create: <TableColumns> <TableColumn><Width>1.5in</Width></TableColumn> <TableColumn><Width>1.5in</Width></TableColumn> <TableColumn><Width>1.5in</Width></TableColumn> <TableColumn><Width>1.5in</Width></TableColumn> </TableColumns>
3
5633
by: juicy | last post by:
I create 10 textfield in tabular form (with loop 10 times). Now I want to add a button to let user add new line, but I don't have idea/ reference on how to do this. Can anyone give me some useful link/ suggestion on this? Thanks.
5
1560
by: Gelembjuk | last post by:
Hello. I use script modal-message from http://www.dhtmlgoodies.com/index.html?whichScript=modal-message It works good but i have one problem. I want it show some html content. I set width and height for dialog. But some times html content height is more then dialo height and in
0
8344
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8857
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8633
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7367
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5654
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4180
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4347
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
2762
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
1993
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.