add text to div

C

cerr

Hi There,

I have a div and i would like to add/remove text from a javascript
function depending on what arguments get passed.
I know I need to use appendchild() but I didn't figure out how exactly
I can use it.
So far I came up with this: http://24.82.174.207/iNetGate/index.php?sel=portfolio
I would liek to have the text 'test' being displayed in <div
id="descr"></div>.
How can I do this? Assistance is appreciated!

Thank you,
roN
 
L

Luuk

Hi There,

I have a div and i would like to add/remove text from a javascript
function depending on what arguments get passed.
I know I need to use appendchild() but I didn't figure out how exactly
I can use it.
So far I came up with this: http://24.82.174.207/iNetGate/index.php?sel=portfolio
I would liek to have the text 'test' being displayed in <div
id="descr"></div>.
How can I do this? Assistance is appreciated!

Thank you,
roN
Click to expand...

Google for "javascript getelementbyid" and i'm sure you will find the
solution, but just in case you dont here is a simple example ;)

<html>
<head>

<script>
function test() {
var w = document.getElementById("message");
w.innerHTML = "cool";
}
</script>

</head>
<body>

<div onclick="test();">TEST</div>

<hr>
<div id="message"></div>

</body>
</html>
 
J

Jukka K. Korpela

I have a div and i would like to add/remove text from a javascript
function depending on what arguments get passed.
Click to expand...

Do you want to add text or replace existing text by some new text? From
the context, I guess it's the latter.
I know I need to use appendchild() but I didn't figure out how exactly
I can use it.
So far I came up with this: http://24.82.174.207/iNetGate/index.php?sel=portfolio
I would liek to have the text 'test' being displayed in <div
id="descr"></div>.
Click to expand...

You are using a mixture of two approaches. You can
1) include statically an element with empty content in HTML and modify
its contents in JavaScript
2) create dynamically an element and add it to the document tree.
The appendChild (not appendchild!) function is part of approach 2,
whereas the <div> element you mention is part of approach 1.

As you probably want to replace existing text, approach 1 is better, and
you just need to replace the statements

var x=get('descr');
x.appendChild();

by the statement

document.getElementById('descr').innerHTML = text;
 
C

cerr

Do you want to add text or replace existing text by some new text? From
the context, I guess it's the latter.


 > I would liek to have the text 'test' being displayed in <div
 > id="descr"></div>.

You are using a mixture of two approaches. You can
1) include statically an element with empty content in HTML and modify
its contents in JavaScript
2) create dynamically an element and add it to the document tree.
The appendChild (not appendchild!) function is part of approach 2,
whereas the <div> element you mention is part of approach 1.

As you probably want to replace existing text, approach 1 is better, and
you just need to replace the statements

var x=get('descr');
x.appendChild();

by the statement

document.getElementById('descr').innerHTML = text;
Click to expand...

Yep, got it. Thanks!
But why does this only work in Firefox? Chrome doesnt display the
image and neither does it display the text :( Why is that?
Thanks for some further help!
roN
 
J

Jukka K. Korpela

[...]
But why does this only work in Firefox? Chrome doesnt display the
image and neither does it display the text :( Why is that?
Click to expand...

Chrome isn't as permissive as Firefox with respect to some coding
errors, in code other than the one under discussion. It encounters an
error and then skips the rest of the function body.

If you right-click one of your links in Chrome and select "Inspect
element", you enter the debugging (or inspection) mode of Chrome. There
you can select the "Console" pane and see, right under the code line

document.pereview.src=imgurl;

the error message that says "cannot set property '.src' of undefined".
This is somewhat cryptic, but you can deduce that it is trying to say
that document.pereview is undefined.

The reason is that notations like document.pereview belong to the dark
ages of competing and messy document object models (DOM) - it's a bit
odd that Chrome does not support it, since such notations are still
fairly common, but anyway, you need to replace it by the use of the
standardized DOM, using a way that works on all browsers worth
mentioning these days:

document.getElementById('pereview').src = imgurl;
 
E

Evertjan.

cerr wrote on 07 mei 2011 in comp.lang.javascript:
Yep, got it. Thanks!
But why does this only work in Firefox? Chrome doesnt display the
image and neither does it display the text :( Why is that?
Thanks for some further help!
Click to expand...


Meseems your error is not showing the complete minimal code.

============================

<div id="myId">......</div>.

<script type='text/javascript'>

var text= 'blah';
document.getElementById('myId').innerHTML = text;

</script>

============================

This works fine in Chrome.
 
C

cerr

So far I came up with this:http://24.82.174.207/iNetGate/index.php?sel=portfolio
Click to expand...
[...]
But why does this only work in Firefox? Chrome doesnt display the
image and neither does it display the text :( Why is that?
Click to expand...

Chrome isn't as permissive as Firefox with respect to some coding
errors, in code other than the one under discussion. It encounters an
error and then skips the rest of the function body.

If you right-click one of your links in Chrome and select "Inspect
element", you enter the debugging (or inspection) mode of Chrome. There
you can select the "Console" pane and see, right under the code line

document.pereview.src=imgurl;

the error message that says "cannot set property '.src' of undefined".
This is somewhat cryptic, but you can deduce that it is trying to say
that document.pereview is undefined.

The reason is that notations like document.pereview belong to the dark
ages of competing and messy document object models (DOM) - it's a bit
odd that Chrome does not support it, since such notations are still
fairly common, but anyway, you need to replace it by the use of the
standardized DOM, using a way that works on all browsers worth
mentioning these days:

document.getElementById('pereview').src = imgurl;
Click to expand...

Alright, that was it! Cool, Thanks pal! :)
 
D

Dr J R Stockton

Sat said:
If you right-click one of your links in Chrome and select "Inspect
element", you enter the debugging (or inspection) mode of Chrome. There
you can select the "Console" pane and see, right under the code line

document.pereview.src=imgurl;
Click to expand...

It may be germane to observe that Google shows two occurrences of
'document.pereview' (both in this thread) and over a million of
'document.preview'.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to make a div select work? 5
How can I add arrows to my FAQ 0
Text does not display correctly to glow 2
[HELP] Add-on - Twitch chat input 0
How to add dropdown selected data to table using jquery 2
Unable to add task to todo list 1
Show text on-click with transition 2
Add content to existing div 7

Members online

No members online now.
Total: 103 (members: 1, guests: 102)
Robots: 383

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top