document.write() in the middle of a document?

[jullag]

Hi,

does anyone know of any javascript method that does the same job as
document.write(), but not necessarily at the end of the document? For
instance, insert some text inside an element that has a specific ID
tag?
thanks a lot
JL

 

[Evertjan.]

jullag wrote on 19 sep 2005 in comp.lang.javascript:

Hi,

does anyone know of any javascript method that does the same job as
document.write(), but not necessarily at the end of the document? For
instance, insert some text inside an element that has a specific ID
tag?
thanks a lot
JL

document.write() can be used anywhere in a html document, but it should
only be used before the document is fully loaded and an implicit
document.close() is issued.

Any next document.write() will implicidly do a document.open(), thereby
destroying the whole page inclusive of any onpage javascript.

 

[Frances]

document.getElementById("MyDiv").innerHTML="whatever"

I'm also having a document.write() problem.. document.write is
generated dynamically, and everything else in the page disappears when
document.write() executes.. thank you...

Frances

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Mon,
19 Sep 2005 13:48:51, seen in Frances

I'm also having a document.write() problem.. document.write is
generated dynamically, and everything else in the page disappears when
document.write() executes.. thank you...

Both respondents, and the OP, should read the newsgroup FAQ.

To be clueful, recommendation of getElementByID should be accompanied by
noting that it does not work on all browsers (see FAQ) and that it can
be emulated well enough for some of the others.

if (document.all && !document.getElementById) {
document.getElementById = function(id) { return document.all[id] } }

 

[Lee]

Frances said:

I'm also having a document.write() problem.. document.write is
generated dynamically, and everything else in the page disappears when
document.write() executes.. thank you...

That's exactly what document.write() is supposed to do.
The first call to document.write() after the page has been displayed
generates a call to document.open(), to re-open it for writing.
document.open(), in turn, always calls document.clear();

 

[web.dev]

Hi,

does anyone know of any javascript method that does the same job as
document.write(), but not necessarily at the end of the document? For
instance, insert some text inside an element that has a specific ID
tag?
thanks a lot
JL

Hi JL,

Off the top of my head, I can think of 2 ways.

Suppose you had an element:

<div id = "mydiv"></div>

and you wanted to insert text in between the div tag. You can do the
following:

var div = document.getElementById("mydiv");
var text = document.createTextNode("my text");
div.appendChild(text);

OR

document.getElementById("mydiv").innerHTML = "my text";

Hope this helps.

 

[Randy Webb]

Dr John Stockton said the following on 9/19/2005 4:20 PM:

JRS: In article <[email protected]>, dated Mon,
19 Sep 2005 13:48:51, seen in Frances

I'm also having a document.write() problem.. document.write is
generated dynamically, and everything else in the page disappears when
document.write() executes.. thank you...

Both respondents, and the OP, should read the newsgroup FAQ.

To be clueful, recommendation of getElementByID should be accompanied by
noting that it does not work on all browsers (see FAQ) and that it can
be emulated well enough for some of the others.

if (document.all && !document.getElementById) {
document.getElementById = function(id) { return document.all[id] } }

And that it is only needed for a browser that is almost 10 years old?

 

[cwdjrxyz]

Hi,

does anyone know of any javascript method that does the same job as
document.write(), but not necessarily at the end of the document? For
instance, insert some text inside an element that has a specific ID
tag?
thanks a lot
JL

It is interesting that document.write is taboo in xhtml 1.1 served
correctly as application/xhtml+xml. Most of the recent browsers can
handle this mime type, but not the badly outmoded IE6(you can use a php
include at the very top of the page to automatically rewrite the code
as html 4.01 strict if you run into an outmoded browser). When you
write in xhtml 1.1 and serve as the correct mentioned mime type, modern
browsers including Opera and the Mozilla family(Mozilla, Firefox,
Netscape) become extremely strict and parse the code as xml. One reason
a document.write can not be allowed, is there is no telling what it
might write including tags that are not closed or xml forbidden
characters. Thus document.write can not be allowed. If you use
document.write, even in an external script, the page will not display
and you may get a xml parse error message from the browser. I often use
server-side php script to get around this problem. For example, my
60000 year perpetual calendar needs hundreds of divisions to write a
calendar for a full year. This was done with javascript using a
document.write at the bottom of a nest of 4 "for" loops to write all of
the divisions. This all had to go on conversion to xhtml 1.1 served
with the proper mime type. One enters the desired year, which is sent
to the server. Then the server uses php to write the code for the
calendar for the selected year, which produces hundreds of divisions.
This code is then downloaded to the browser, and the xml parser is
pleased because it can check all of the computed divisions for closing
tags, xml forbidden characters, and such. Many are kicking and
screaming about using true xhtml, but it can be done now in most cases
with automatic conversion to html 4.01 strict for outmoded browsers. If
one only considered PCs, there might be little justification for xhtml
and xml purity. However there are now a large number of computing
devices out there in addition to PCs. To allow the many devices to
exchange information, they all need to conform to xml or some other
standard they they all can understand. For now, xml seems to be the
best common language for most devices that we have.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Mon, 19 Sep
2005 18:58:42, seen in Randy Webb

Dr John Stockton said the following on 9/19/2005 4:20 PM:

To be clueful, recommendation of getElementByID should be accompanied by
noting that it does not work on all browsers (see FAQ) and that it can
be emulated well enough for some of the others.

if (document.all && !document.getElementById) {
document.getElementById = function(id) { return document.all[id] } }

And that it is only needed for a browser that is almost 10 years old?

You exaggerate : the system age is less than three-quarters of that.

Not everyone uses the latest systems (vulnerable to the latest malware).


Indeed, you yourself are using, AIUI, an out-of-date newsreader.

Can

User-Agent: Mozilla Thunderbird 0.7.2 (Windows/20040707)
X-Accept-Language: en-us, en

be set to properly unambiguous date-stamps, rather than such as

9/1/2005 6:13 PM meaning Sep 1st

and, if so, how?

I don't think it's alterable, but there have been several upgrades
since then. Version 1.0.2 gives the proper dd mmm yyyy hh:mm:ss format.

</QUOTE>

Of course, even that format is not as proper as it would be if it
followed ISO 8601.

 

[Frances]

Hi JL,

Off the top of my head, I can think of 2 ways.

Suppose you had an element:

<div id = "mydiv"></div>

and you wanted to insert text in between the div tag. You can do the
following:

var div = document.getElementById("mydiv");
var text = document.createTextNode("my text");
div.appendChild(text);

OR

document.getElementById("mydiv").innerHTML = "my text";

Hope this helps.

ok, I'm following advice here.. but it's not working right...

function pricing() {
var list = document.forms[0].product;
var selItem = list.options[list.selectedIndex].value;
// alert('iframes/' + selItem + '.html');

// var copy = 'yada yada'; // ***** prints fine..

var copy = '<iframe src="iframes/' + selItem + '.html" scrolling=no
width=300 height=200 frameborder=0>';
var copy =+ '</iframe>'; // ******** prints 'NaN'

var div = document.getElementById("divPricing");
var divCopy = document.createTextNode(copy);
// div.appendChild(divCopy); // ******* prints 'NaN'

document.getElementById("divPricing").innerHTML = divCopy;
// **** prints '[object]'
// whether plain text or "<iframe>..." in var 'copy'
}

would appreciate some leads.. thank you very much...

Frances

 

[km0ti0n]

Hi

First thing i notice is the way you are referencing the value of the
select please read this :

http://km0ti0n.blunted.co.uk/viewfaq.xap?ID=632629154586250000

Ok so you want to create HTML dynamically. There's a workign example
here:

http://km0ti0n.blunted.co.uk/Using DOM methods to create html.xap

As for adding an iframe I had to think for a minuite to ensure it was
possible to append an iframe using DOM methods. I made you this
example.

http://km0ti0n.blunted.co.uk/viewng.xap?ID=632629149606406250

Hope it helps

 

[Frances]

Hi

First thing i notice is the way you are referencing the value of the
select please read this :

http://km0ti0n.blunted.co.uk/viewfaq.xap?ID=632629154586250000

Ok so you want to create HTML dynamically. There's a workign example
here:

http://km0ti0n.blunted.co.uk/Using DOM methods to create html.xap

As for adding an iframe I had to think for a minuite to ensure it was
possible to append an iframe using DOM methods. I made you this
example.

http://km0ti0n.blunted.co.uk/viewng.xap?ID=632629149606406250

Hope it helps

thank you very much for yr help...

I have a few questions about yr example..

function test() {
var iframe = document.createElement("iframe");
iframe.src = "http://www.google.co.uk";
document.getElementById("body").appendChild( iframe );
}

I have adapted yr function as follows:

function pricing() {
list = document.forms[0].product;
selItem = list.options[list.selectedIndex].value;

var iframe = document.createElement("iframe");
// iframe.src = "iframes/cc.html"; // works fine..
// file I want to see shows up fine...

iframe.src = "iframes/' + selItem + '.html"; // get a 404...
// ?? alert below prints what I expect it to..
// shows correct path to file..
alert('iframes/' + selItem + '.html');

document.getElementById("divPricing").appendChild( iframe );
}

this line

changed to
document.getElementById("divPricing").appendChild( iframe );

b/c this iframe goes inside a div (a div nested inside another div..)
and either way when did
document.getElementById("body").appendChild( iframe );
got an error..
("document.getElementById("") is null or not an object..")

thank you very much..

Frances

 

[km0ti0n]

I fyou are getting ("document.getElementById("") is null or not an
object..") errors make sure you are referenceing the element correctly.
By checking the ID of the element is correct and make sure the the
elements id isn't duplicated.

I see you have this

document.getElementById("divPricing").appendChild( iframe );

You should have the corrisponding HTML :

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

Normally it's a typo....

Also you are *STILL* using selItem =
list.options[list.selectedIndex].value; and not just list.value. they
are the same.

 

[Frances]

I fyou are getting ("document.getElementById("") is null or not an
object..") errors make sure you are referenceing the element correctly.
By checking the ID of the element is correct and make sure the the
elements id isn't duplicated.

I see you have this

document.getElementById("divPricing").appendChild( iframe );

You should have the corrisponding HTML :

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

Normally it's a typo....

Also you are *STILL* using selItem =
list.options[list.selectedIndex].value; and not just list.value. they
are the same.

you're right -- I just changed that.. however on larger problem:

yes, corresponding HTML IS there for div..

<div id="divPricing">
</div>

and positioned w/css where I want it..

funny thing I noticed is that behavior is exactly the same whether or
not I put quotes in <option> tags..

<option value="doc1">Doc 1</option>
<option value="doc2">Doc 2</option>

<option value=doc1>Doc 1</option>
<option value=doc2>Doc 2</option>

exact same behavior here in both cases...
???

again many thanks for yr help..

 

[Frances]

I fyou are getting ("document.getElementById("") is null or not an
object..") errors make sure you are referenceing the element correctly.
By checking the ID of the element is correct and make sure the the
elements id isn't duplicated.

I see you have this

document.getElementById("divPricing").appendChild( iframe );

You should have the corrisponding HTML :

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

Normally it's a typo....

Also you are *STILL* using selItem =
list.options[list.selectedIndex].value; and not just list.value. they
are the same.

ok, am trying a different approach, iframes print w/a border that I
can't get rid of.. not sure yet whether will go w/iframes or not, but at
any rate am having problems w/this approach also:

in <body>:
<option value="val1">Product One</option>
<option value="val2">Product Two</option>
<option value="val3">Product Three</option>
<option value="val4">Product Four</option>

in <head>:
function pricing() {
var val1 = "Product One";
var val2 = "Product Two";
var val3 = "Product Three";
var val4 = "Product Four";

var list = document.forms[0].product;
var selItem = list.value;
var copy = "" + selItem + "";
var div = document.getElementById("divPricing");
var divCopy = document.createTextNode(copy);

div.appendChild(divCopy); // prints, for example,
// (no quotes) 'val4' instead of 'Product Four'...

// div.innerHTML = divCopy; // this prints '[object]' (no quotes)
}


again many thanks for your help...... Frances

ok, I think I need to go back to iframes..

the problem is a very odd one.. pls see below:

function pricing() {
var list = document.forms[0].product;
var selItem = list.value;
var ifr = document.createElement("iframe");
//ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..

look @ 2 following lines.. this is very weird..
ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..
// ifr.src = "iframes/aa.html"; // *****loads fine..

document.getElementById("divPricing").appendChild( ifr );
}

I can't just put divs there or do show/hide divs b/c this is for a div
nested in another div which itself is hidden or visible depending on
user input.. would appreciate any help here.. thank you very much...

 

[Frances]

I fyou are getting ("document.getElementById("") is null or not an
object..") errors make sure you are referenceing the element correctly.
By checking the ID of the element is correct and make sure the the
elements id isn't duplicated.

I see you have this

document.getElementById("divPricing").appendChild( iframe );

You should have the corrisponding HTML :

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

Normally it's a typo....

Also you are *STILL* using selItem =
list.options[list.selectedIndex].value; and not just list.value. they
are the same.

ok, am trying a different approach, iframes print w/a border that I
can't get rid of.. not sure yet whether will go w/iframes or not, but
at any rate am having problems w/this approach also:

in <body>:
<option value="val1">Product One</option>
<option value="val2">Product Two</option>
<option value="val3">Product Three</option>
<option value="val4">Product Four</option>

in <head>:
function pricing() {
var val1 = "Product One";
var val2 = "Product Two";
var val3 = "Product Three";
var val4 = "Product Four";

var list = document.forms[0].product;
var selItem = list.value;
var copy = "" + selItem + "";
var div = document.getElementById("divPricing");
var divCopy = document.createTextNode(copy);

div.appendChild(divCopy); // prints, for example,
// (no quotes) 'val4' instead of 'Product Four'...

// div.innerHTML = divCopy; // this prints '[object]' (no quotes)
}


again many thanks for your help...... Frances

ok, I think I need to go back to iframes..

the problem is a very odd one.. pls see below:

function pricing() {
var list = document.forms[0].product;
var selItem = list.value;
var ifr = document.createElement("iframe");
//ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..

look @ 2 following lines.. this is very weird..
ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..

ok, above line is wrong (the quotes..)
however when did this still got 404..

ifr.src = '"iframes/' + 'aa' + '.html"';

only way finally got it to work:

ifr.src = 'iframes/' + selItem + '.html';

?????
(tried to escape that double-quote like you do in java, but also no go..)

 

[web.dev]

km0ti0n wrote:

I fyou are getting ("document.getElementById("") is null or not an
object..") errors make sure you are referenceing the element correctly.
By checking the ID of the element is correct and make sure the the
elements id isn't duplicated.

I see you have this

document.getElementById("divPricing").appendChild( iframe );

You should have the corrisponding HTML :

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

Normally it's a typo....

Also you are *STILL* using selItem =
list.options[list.selectedIndex].value; and not just list.value. they
are the same.



ok, am trying a different approach, iframes print w/a border that I
can't get rid of.. not sure yet whether will go w/iframes or not, but
at any rate am having problems w/this approach also:

in <body>:
<option value="val1">Product One</option>
<option value="val2">Product Two</option>
<option value="val3">Product Three</option>
<option value="val4">Product Four</option>

in <head>:
function pricing() {
var val1 = "Product One";
var val2 = "Product Two";
var val3 = "Product Three";
var val4 = "Product Four";

var list = document.forms[0].product;
var selItem = list.value;
var copy = "" + selItem + "";
var div = document.getElementById("divPricing");
var divCopy = document.createTextNode(copy);

div.appendChild(divCopy); // prints, for example,
// (no quotes) 'val4' instead of 'Product Four'...

// div.innerHTML = divCopy; // this prints '[object]' (no quotes)
}


again many thanks for your help...... Frances

ok, I think I need to go back to iframes..

the problem is a very odd one.. pls see below:

function pricing() {
var list = document.forms[0].product;
var selItem = list.value;
var ifr = document.createElement("iframe");
//ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..

look @ 2 following lines.. this is very weird..
ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..

ok, above line is wrong (the quotes..)
however when did this still got 404..

ifr.src = '"iframes/' + 'aa' + '.html"';

I don't see why you even need to place in double quotes. The whole
thing is a string value. The above code statement is equivalent to the
following:

ifr.src = '"iframes/aa.html"';

When all you really could've done is:

ifr.src = 'iframes/aa.html';

only way finally got it to work:

ifr.src = 'iframes/' + selItem + '.html';

The solution you're presenting here does not really relate to the above
problem you mentioned.

?????
(tried to escape that double-quote like you do in java, but also no go..)

If you're having trouble with javascript, I would rather you post your
own thread instead of using someone else's.

 

[Frances]

Frances wrote:


km0ti0n wrote:


I fyou are getting ("document.getElementById("") is null or not an
object..") errors make sure you are referenceing the element correctly.
By checking the ID of the element is correct and make sure the the
elements id isn't duplicated.

I see you have this

document.getElementById("divPricing").appendChild( iframe );

You should have the corrisponding HTML :

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

Normally it's a typo....

Also you are *STILL* using selItem =
list.options[list.selectedIndex].value; and not just list.value. they
are the same.



ok, am trying a different approach, iframes print w/a border that I
can't get rid of.. not sure yet whether will go w/iframes or not, but
at any rate am having problems w/this approach also:

in <body>:
<option value="val1">Product One</option>
<option value="val2">Product Two</option>
<option value="val3">Product Three</option>
<option value="val4">Product Four</option>

in <head>:
function pricing() {
var val1 = "Product One";
var val2 = "Product Two";
var val3 = "Product Three";
var val4 = "Product Four";

var list = document.forms[0].product;
var selItem = list.value;
var copy = "" + selItem + "";
var div = document.getElementById("divPricing");
var divCopy = document.createTextNode(copy);

div.appendChild(divCopy); // prints, for example,
// (no quotes) 'val4' instead of 'Product Four'...

// div.innerHTML = divCopy; // this prints '[object]' (no quotes)
}


again many thanks for your help...... Frances



ok, I think I need to go back to iframes..

the problem is a very odd one.. pls see below:

function pricing() {
var list = document.forms[0].product;
var selItem = list.value;
var ifr = document.createElement("iframe");
//ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..

look @ 2 following lines.. this is very weird..
ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..

ok, above line is wrong (the quotes..)
however when did this still got 404..

ifr.src = '"iframes/' + 'aa' + '.html"';

I don't see why you even need to place in double quotes. The whole
thing is a string value. The above code statement is equivalent to the
following:

ifr.src = '"iframes/aa.html"';

ok, what confused me is that in TAG (<iframe>) you have to put (I think)
attr under src in quotes (<iframe src="file.html"..>) is this right? at
any rate not sure this is 100% required so left them out.. but of course
you're right, I'm not even generating iframe w/a conventional tag so I
guess that requirement doesn't apply..

finally got this to work thus:

list = document.forms[0].product;
selItem = list.value;
var ifr = document.createElement("iframe");
ifr.src = 'iframes/' + selItem + '.html';
ifr.scrolling = 'no';
ifr.style.borderWidth='0'; // this only stuff that's not working..
document.getElementById("divPricing").appendChild(ifr);


problem NOW is that when user goes back to sel obj and selects a diff.
product new iframe gets placed BESIDE current one, not in same place
where other one is (which is weird b/c iframe is inside a div
positioned absolutely w/css.. I guess have to do the visible/hidden
thingie w/css...)

again, many thanks for your help..... Frances

 

[web.dev]

Frances wrote:

Frances wrote:


km0ti0n wrote:


I fyou are getting ("document.getElementById("") is null or not an
object..") errors make sure you are referenceing the element correctly.
By checking the ID of the element is correct and make sure the the
elements id isn't duplicated.

I see you have this

document.getElementById("divPricing").appendChild( iframe );

You should have the corrisponding HTML :

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

Normally it's a typo....

Also you are *STILL* using selItem =
list.options[list.selectedIndex].value; and not just list.value. they
are the same.



ok, am trying a different approach, iframes print w/a border that I
can't get rid of.. not sure yet whether will go w/iframes or not, but
at any rate am having problems w/this approach also:

in <body>:
<option value="val1">Product One</option>
<option value="val2">Product Two</option>
<option value="val3">Product Three</option>
<option value="val4">Product Four</option>

in <head>:
function pricing() {
var val1 = "Product One";
var val2 = "Product Two";
var val3 = "Product Three";
var val4 = "Product Four";

var list = document.forms[0].product;
var selItem = list.value;
var copy = "" + selItem + "";
var div = document.getElementById("divPricing");
var divCopy = document.createTextNode(copy);

div.appendChild(divCopy); // prints, for example,
// (no quotes) 'val4' instead of 'Product Four'...

// div.innerHTML = divCopy; // this prints '[object]' (no quotes)
}


again many thanks for your help...... Frances



ok, I think I need to go back to iframes..

the problem is a very odd one.. pls see below:

function pricing() {
var list = document.forms[0].product;
var selItem = list.value;
var ifr = document.createElement("iframe");
//ifr.src = "iframes/' + selItem + '.html"; // *** get a 404..

look @ 2 following lines.. this is very weird..
ifr.src = "iframes/' + 'aa' + '.html"; // **** get a 404..

ok, above line is wrong (the quotes..)
however when did this still got 404..

ifr.src = '"iframes/' + 'aa' + '.html"';

I don't see why you even need to place in double quotes. The whole
thing is a string value. The above code statement is equivalent to the
following:

ifr.src = '"iframes/aa.html"';

ok, what confused me is that in TAG (<iframe>) you have to put (I think)
attr under src in quotes (<iframe src="file.html"..>) is this right? at
any rate not sure this is 100% required so left them out.. but of course
you're right, I'm not even generating iframe w/a conventional tag so I
guess that requirement doesn't apply..

finally got this to work thus:

list = document.forms[0].product;
selItem = list.value;
var ifr = document.createElement("iframe");
ifr.src = 'iframes/' + selItem + '.html';
ifr.scrolling = 'no';
ifr.style.borderWidth='0'; // this only stuff that's not working..

It is working. But it's probably not the border you were thinking of.
That border is for placing a border around the entire iframe. And if
that's the case, then you still have what you asked for, a zero border.
But if you wanted something visible, you might also want to set the
borderStyle and the borderColor.

document.getElementById("divPricing").appendChild(ifr);


problem NOW is that when user goes back to sel obj and selects a diff.
product new iframe gets placed BESIDE current one, not in same place
where other one is (which is weird b/c iframe is inside a div
positioned absolutely w/css.. I guess have to do the visible/hidden
thingie w/css...)

again, many thanks for your help..... Frances

Hiding the other frames with css is not a good solution. Consider
this, what if the user continuously selects a different product? Then
the page will continue to append a new child.

What you'll have to do is use the replaceChild method.

document.getElementById("id").appendChild(newChild, oldChild);

 

[Frances]

The value property of an HTMLSelectElement is specified in the W3C HTML
DOM standard, and is a formalisation of pre-existing behaviour from some
browser implementations. It was not universal at the time of its
standardisation and so its use in place of looking up the value of a
selected option with the selectedIndex property will needlessly
sacrifice browser compatibility. This would not be wise in a script such
as a form validation script that does not itself have a dependency on
other more recent DOM features.

Richard.

yes, I tried this, it works.. thank you.. I like it, simpler than other
way... (also thanks for pointing out I had wrong var decl (=+ instead
of +=..)