add a text in the same HTML page

C

Caroline

Rather than opening a new window, how can I add a text (or HTML code)
in the same HTML page, in a specific location?

The code I tried is the following:

<head>
<script language="JavaScript">
function displayText()
{ document.write("qwertyuiop");
}
</script>
</head>

<body>
<a href="javascript:displayText()">Text</a>
</body>
 
L

Laurent Bugnion, GalaSoft

Hi,
Rather than opening a new window, how can I add a text (or HTML code)
in the same HTML page, in a specific location?

The code I tried is the following:

<head>
<script language="JavaScript">
function displayText()
{ document.write("qwertyuiop");
}
</script>
</head>

<body>
<a href="javascript:displayText()">Text</a>
</body>
Click to expand...

First, you should not use the javascript: pseudo protocol in a link.
Rather use the ONCLICK event handler, and use the HREF attribute to lead
to a page handling users without JavaScript.

<A HREF="nojs.html"
ONCLICK="displayText();return false;">Text</A>

That said, what you try to do is not possible for a simple reason: After
the page is rendered, the document is closed. Every attempt to write to
this closed document will reset it fully, and erase everything on the
page (including the script currently being executed).

So you will end up with a blank page with the text "qwertyuiop" on it.

YOu will need to store the document content to some place (or to have a
way to recreate/access it), add the text to this String and then write
the whole document back using document.write().

Note also that after you're done writing, you should close the document
with document.close()

Hope that helps,

Laurent
 
L

Laurent Bugnion, GalaSoft

Hi again,
Rather than opening a new window, how can I add a text (or HTML code)
in the same HTML page, in a specific location?

The code I tried is the following:

<head>
<script language="JavaScript">
function displayText()
{ document.write("qwertyuiop");
}
</script>
</head>

<body>
<a href="javascript:displayText()">Text</a>
</body>
Click to expand...

Forgot to add that you also can use the DOM Level 2 to access the text
node you want to modify. However, I am not sure if this is soemthing you
want/can do (it only works on the newest browsers and requires some
programming knowledge).

Laurent
 
C

Caroline

Thank you Laurent and Guy for your quick replies;
However, for didactive purposes, I would like to understand the details:
- What is wrong with the javascript: pseudo protocol in a link?
- what is 'return false;' used for excactly?
- What do you mean exactly by 'use the DOM Level 2 to access the text
node you want to modify?'

Thank you

Caroline
 
G

G Roydor

Caroline a écrit:
Thank you Laurent and Guy for your quick replies;
However, for didactive purposes, I would like to understand the details:
- What is wrong with the javascript: pseudo protocol in a link?
- what is 'return false;' used for excactly?
Click to expand...
return false; interrompt la séquence d'exécution.
- What do you mean exactly by 'use the DOM Level 2 to access the text
node you want to modify?'
Click to expand...

DOM level 2 est la méthode que je vous ai indiquée. ...innerHTML = "text";

ce niveau requiert des navigateurs récents;(ex : IE5 et Netscape 7)
 
C

Csaba2000

My utilitarian view of things:

Caroline said:
Thank you Laurent and Guy for your quick replies;
However, for didactive purposes, I would like to understand the details:
- What is wrong with the javascript: pseudo protocol in a link?
Click to expand...

If you have this and a browser without javascript (or javascript
turned off) will have no idea what to do with the link. Thererfore,
even if you are coding for javascript, it is good general practise
to use onClick.
- what is 'return false;' used for excactly?
Click to expand...

return false tells the browser to stop doing what it would
normally do in handling the event. In the case of a link,
it would tend to follow the link, but the "return false;" should
suppress this tendancy.
- What do you mean exactly by 'use the DOM Level 2 to access the text
node you want to modify?'
Click to expand...

This is not your exact answer but an indication:
In early browser history people tended to view a page as
basically text that you marked up for display.
More recent browsers acknowledge that a document
is actually a graph where each all of the pieces of the
document are nodes in the graph with all sorts of
attributes that determine how the pieces display and
what can happen to/with them.
'use DOM Level 2' means to basically acknowledge
this view and explicitly operate on nodes (as opposed
to spewing HTML (with .innerHTML, say) and leaving
the browser to implicitly create the nodes) by using
constructs provided for this purpose
(such as document.createElement or
document.createTextNode and insertBefore).

Csaba Gabor from New York
 

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

JQuery add shadow error 4
Background image not showing up on html page 3
Add a list of videos each one in a different button in a web page 1
How can I add React 18 to existing HTML? 2
Add recipes using JavaScript in table 20
Child/opener page sometimes returns a blank page after reloading/refreshing the same child/opener in JavaScript 2
How to properly insert a landing page within same container beneath an image element? 1
The color rule I coded in CSS doesn't go the same with HTML 1

Members online

No members online now.
Total: 502 (members: 1, guests: 501)
Robots: 495

Forum statistics

Threads
474,099
Messages
2,570,626
Members
47,237
Latest member
David123

Latest Threads

Top