473,569 Members | 2,607 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Changing text between <div>'s

Stupid basic question but I find it horribly imposible to find the answer
elsewhere... :-(

I want to have a piece of text in my HTML page and want to be able to change
it in a Javascript function that is called from a button. I think I can use
a

<div id="t"></div>

for this ? Something like

document.t.valu e="Hello"

should change it into

<div id="t">Hello</div>

I am getting fucking mad at finding these simple things.... Is there a good
intro somewhere ? My thick Oreilly JS book is just too busy with the
complicated stuff somehow :-((

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu

Jul 20 '05 #1
55 7171
Ok, already solved it. Remembered I asked this once before....

document.getEle mentById('t').f irstChild.nodeV alue="Hello";

Unbelievable how complex.... Will look for the model of this....

Thanks,

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu
"Ton den Hartog" <to************ ***********@ton h.net> wrote in message
news:3f******** *************@n ews.xs4all.nl.. .
Stupid basic question but I find it horribly imposible to find the answer
elsewhere... :-(

I want to have a piece of text in my HTML page and want to be able to change it in a Javascript function that is called from a button. I think I can use a

<div id="t"></div>

for this ? Something like

document.t.valu e="Hello"

should change it into

<div id="t">Hello</div>

I am getting fucking mad at finding these simple things.... Is there a good intro somewhere ? My thick Oreilly JS book is just too busy with the
complicated stuff somehow :-((

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu

Jul 20 '05 #2
Why is this so complex ??? Why does DOM not have an easy model for this ????

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu
"Ton den Hartog" <to************ ***********@ton h.net> wrote in message
news:3f******** *************@n ews.xs4all.nl.. .
Ok, already solved it. Remembered I asked this once before....

document.getEle mentById('t').f irstChild.nodeV alue="Hello";

Unbelievable how complex.... Will look for the model of this....

Thanks,

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu
"Ton den Hartog" <to************ ***********@ton h.net> wrote in message
news:3f******** *************@n ews.xs4all.nl.. .
Stupid basic question but I find it horribly imposible to find the answer elsewhere... :-(

I want to have a piece of text in my HTML page and want to be able to

change
it in a Javascript function that is called from a button. I think I can

use
a

<div id="t"></div>

for this ? Something like

document.t.valu e="Hello"

should change it into

<div id="t">Hello</div>

I am getting fucking mad at finding these simple things.... Is there a

good
intro somewhere ? My thick Oreilly JS book is just too busy with the
complicated stuff somehow :-((

Ton

--
--
Computer museum tonh: http://www.tonh.net/museum - 10.000 visitors !!
GGGallery website generator: http://www.tonh.net/gggallery
Vrij Kunst Centrum : http://www.meesterschap.nu


Jul 20 '05 #3
On Fri, 26 Dec 2003 12:19:38 +0100, "Ton den Hartog"
<to************ ***********@ton h.net> wrote:
Why is this so complex ??? Why does DOM not have an
easy model for this ????


DOM is not designed to be simple it's designed to be consistent across
programming languages, I have no idea why that was a design aim, but
it is, this means what can be done simply in typeless scripting
language doesn't get into the language if it would make the java or
LISP binding more complicated.

It's often best to use the proprietary methods, as these generally are
optimised for scripting, and only fallback to DOM if they don't work.

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

Jul 20 '05 #4
> It's often best to use the proprietary methods

Which is in this case ?

Thanks,

Ton

, as these generally are
optimised for scripting, and only fallback to DOM if they don't work.

Jim.
--
comp.lang.javas cript FAQ - http://jibbering.com/faq/

Jul 20 '05 #5
Ton den Hartog hu kiteb:
It's often best to use the proprietary methods


Which is in this case ?


document.t.inne rhtml

You'll want to double check the case - its sensitive iirc.
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #6
"Fabian" <la****@hotmail .com> writes:
Ton den Hartog hu kiteb:
It's often best to use the proprietary methods
Which is in this case ?


document.t.inne rhtml


That would fail in all browsers :)

Even if you write it "innerHTML" , it would still fail in IE and probably
also other browsers.

To get the element to change, use
document.getEle mentById("t")
That is the method that works in the most current browsers.
If you need to support IE 4 (or possibly WebTV), you can
use a fallback to the document.all collection:
---
var elem;
if (document.getEl ementById) {
elem = document.getEle mentById("t");
} else if (document.all) { // IE 4 and a few other
elem = document.all["t"];
} // else (e.g., Netscape 4) panic.
---
Just writing "document.t " assumes that the named element is made a
property, with the same name, of the document element. That is not
the case in, e.g., Internet Explorer. (Using just "t.innerHTM L"
would break in Mozilla/Netscape for similar reasons - just use
getElementById! )

You can then change the content with the proprietary (but widely
implemented) innerHTML property:

var elem = document.getEle mentById("t");
elem.innerHTML = "some <em>HTML<\/em> content";

If you want to check for the existence of the innerHTML property
before using it, you have two choices:
Simple:

var elem = document.getEle mentById("t");
if (elem.innerHTML ) { ... }

That has the disadvantage of creating a very large string if elem has
a lot of content already. That is inefficient.

Smart, but dangerous:
var elem = document.getEle mentById("t");
if ("innerHTML" in elem) { ... }

That has the disadvantage of not working in older browsers. I am not
sure any of those support "innerHTML" , but that kind of ruins the
idea of testing.

The syntax ("name" in obj) was introduced in JScript 1.0 (according to
MSDN, so IE it should work in any version of IE), and JavaScript 1.4
(Netscape 6 and later, not Netscape 4). The very bad thing about it
is, that browsers that don't support it, treats it as a syntax error.
That means that it breaks the entire script block it is in.
You'll want to double check the case - its sensitive iirc.


Yes, Javascript is case sensitive.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 20 '05 #7
DU
Jim Ley wrote:
On Fri, 26 Dec 2003 12:19:38 +0100, "Ton den Hartog"
<to************ ***********@ton h.net> wrote:

Why is this so complex ??? Why does DOM not have an
easy model for this ????

DOM is not designed to be simple it's designed to be consistent across
programming languages, I have no idea why that was a design aim, but
it is, this means what can be done simply in typeless scripting
language doesn't get into the language if it would make the java or
LISP binding more complicated.

It's often best to use the proprietary methods,


I disagree. CharacterData attributes and methods are widely and well
supported in recent browsers. If we are talking about text nodes only
(CharacterData objects), then use of proprietary methods is not
recommendable. If we are talking about element nodes, then this is a
different issue.

Unless someone can prove me wrong, all DOM2 CharacterData attributes and
methods are supported 100% by the following browsers:
Safari 1.x
Konqueror 3.x
MSIE 6 for Windows
Mozilla-based browsers (17 browsers) based on Mozilla 1.x
Opera 7.x

So why use anything else than CharacterData attributes and methods?

DU

as these generally are optimised for scripting, and only fallback to DOM if they don't work.

Jim.


Jul 20 '05 #8
DU
Jim Ley wrote:
On Fri, 26 Dec 2003 12:19:38 +0100, "Ton den Hartog"
<to************ ***********@ton h.net> wrote:

Why is this so complex ??? Why does DOM not have an
easy model for this ????

DOM is not designed to be simple it's designed to be consistent across
programming languages, I have no idea why that was a design aim, but
it is, this means what can be done simply in typeless scripting
language doesn't get into the language if it would make the java or
LISP binding more complicated.

It's often best to use the proprietary methods, as these generally are
optimised for scripting, and only fallback to DOM if they don't work.

Jim.

In my own tests, MSIE 6 for windows, Mozilla 1.x, NS 7.1 all render text
node changes 300% faster if you change the text node with W3C DOM
nodeValue than by resorting to innerHTML. This percentage is as high/big
as 2000% on some Opera 7.x versions.
The performance gain will be greater for long text nodes and slow cpu.
The performance gain will be smaller for short text nodes and fast cpu.

Performance comparison between innerHTML attribute and DOM's nodeValue
when modifying the text data of a node of type TEXT_NODE:
http://www10.brinkster.com/doctorunc...NodeValue.html

DOM level 2 CharacterData Interface tests
http://www10.brinkster.com/doctorunc...acterData.html

DU
Jul 20 '05 #9
DU
Ton den Hartog wrote:
Ok, already solved it. Remembered I asked this once before....

document.getEle mentById('t').f irstChild.nodeV alue="Hello";

Unbelievable how complex.... Will look for the model of this....

Thanks,

Ton


Your original code was itself part of the problem. When you write

<div id="t"></div>

then there is no firstChild node in such code. No childNodes either.
MSIE 6 for Windows, Mozilla 1.7alpha, Opera 7.50 PR1 all return null
when querying for document.getEle mentById("t").f irstChild. Just by
inserting a single word or blank space in that div would have made a
difference though.

Further reading:
Nodes:
http://www.quirksmode.org/dom/intro.html#nodes

The Document Object Model (DOM):
The Simple Document's Diagram
http://webreference.com/js/column40/drawsimple.html
(Reading the entire article is best)

DU

Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
84589
by: Paul Thompson | last post by:
When I put a <div ...> inside a <table> specification, functionality is not there. When I put the <table> inside the <div> everything works. Why is that?
7
2106
by: F. Da Costa | last post by:
Hi, I' looking to retrieve ProdName1 form the <tr> below. <tr id="1-1-1" class="even"> <td> <div class="tier4"> <a href="#" class="leaf"></a> ProdName1 </div>
3
2217
by: Craig | last post by:
Hi, What I'm trying (quite poorly) to do is make it so when a link is clicked the text inside a div or p changes. I've tried numerous things, most of which work in IE but none of which work in gecko browsers e.g. Mozilla, Netscape, Epiphany etc etc. This is what I have now and works fine in IE but sits there doing nothing in anything...
8
14456
by: Daniel Hansen | last post by:
I know this must seem totally basic and stupid, but I cannot find any reference that describes how to control the spacing between <p>...</p> and <div>...</div> blocks. When I implement these on a page, there is a huge gap (like 3/8 inch or 25 px) between them. This is driving me bananas. What the hey am I missing? dh...
6
37116
by: Marcus Otmarsen | last post by:
Ok, the situation is as follows: I defined a <DIV> like: <div id="myid" style="position: absolute; height: 10; width: 10;"><img src="images/object.gif" height=10 width=10></div> This pane is used to move an object around on the web page by a javascript. As long as I define no further <div> pane everything works fine.
3
3802
by: Josef K. | last post by:
Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644" onclick="__doPostBack('SitesRadioButtonList_3','')" language="javascript" />
2
3198
by: paul | last post by:
I have a JS function to change the width of a <divthat works great in Firefox, but not at all in IE7. In IE an error message occurs: Line: 92 Char: 5 Error: Invalid Argument Code: 0 Firefox reports no errors in the Error Console, or Firebug, and the <divis resized correctly. Here is the function:
2
1611
by: haroon426 | last post by:
Can anyone plz tell me that how to change the font color of the text in the <div> in server side programming Page_Load() event.
8
1863
by: richard | last post by:
I have <div id=box1 style="display:block"as the initial setting. I need to change the "display:block" to "display:none" then back to "display:block" as a means of clearing anything that might be displayed within the box1 division. What's the simplest way of doing this?
0
7938
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. ...
0
8145
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7694
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7993
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...
0
6317
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...
1
5519
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3679
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...
0
3667
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
970
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.