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

[Frances]

web.dev wrote:

jullag wrote:

Hi,

does anyone know of any javascript method that does the same job as
document.writ e(), 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.getEle mentById("mydiv ");
var text = document.create TextNode("my text");
div.appendChild (text);

OR

document.getEle mentById("mydiv ").innerHTM L = "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.selectedIn dex].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.getEle mentById("divPr icing");
var divCopy = document.create TextNode(copy);
// div.appendChild (divCopy); // ******* prints 'NaN'

document.getEle mentById("divPr icing").innerHT ML = 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...29154586250000

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

http://km0ti0n.blunted.co.uk/Using%2...ate%20html.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....29149606406250

Hope it helps

[Frances]

km0ti0n wrote:

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...29154586250000

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

http://km0ti0n.blunted.co.uk/Using%2...ate%20html.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....29149606406250

Hope it helps

thank you very much for yr help...

I have a few questions about yr example..

function test() {
var iframe = document.create Element("iframe ");
iframe.src = "http://www.google.co.u k";
document.getEle mentById("body" ).appendChild( iframe );
}

I have adapted yr function as follows:

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

var iframe = document.create Element("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.getEle mentById("divPr icing").appendC hild( iframe );
}

this line

changed to
document.getEle mentById("divPr icing").appendC hild( iframe );

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

thank you very much..

Frances

[km0ti0n]

I fyou are getting ("document.getE lementById("") 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.getEle mentById("divPr icing").appendC hild( 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.selectedIn dex].value; and not just list.value. they
are the same.

[Frances]

km0ti0n wrote:

I fyou are getting ("document.getE lementById("") 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.getEle mentById("divPr icing").appendC hild( 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.selectedIn dex].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">Do c 1</option>
<option value="doc2">Do c 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]

km0ti0n wrote:

I fyou are getting ("document.getE lementById("") 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.getEle mentById("divPr icing").appendC hild( 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.selectedIn dex].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">Pr oduct One</option>
<option value="val2">Pr oduct Two</option>
<option value="val3">Pr oduct Three</option>
<option value="val4">Pr oduct 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.getEle mentById("divPr icing");
var divCopy = document.create TextNode(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

[Frances]

Frances wrote:

km0ti0n wrote:

I fyou are getting ("document.getE lementById("") 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.getEle mentById("divPr icing").appendC hild( 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.selectedIn dex].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">Pr oduct One</option>
<option value="val2">Pr oduct Two</option>
<option value="val3">Pr oduct Three</option>
<option value="val4">Pr oduct 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.getEle mentById("divPr icing");
var divCopy = document.create TextNode(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.create Element("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.getEle mentById("divPr icing").appendC hild( 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]

Frances wrote:

Frances wrote:

km0ti0n wrote:

I fyou are getting ("document.getE lementById("") 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.getEle mentById("divPr icing").appendC hild( 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.selectedIn dex].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">Pr oduct One</option>
<option value="val2">Pr oduct Two</option>
<option value="val3">Pr oduct Three</option>
<option value="val4">Pr oduct 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.getEle mentById("divPr icing");
var divCopy = document.create TextNode(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.create Element("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]

Frances wrote:

Frances wrote:

Frances wrote:

km0ti0n wrote:

I fyou are getting ("document.getE lementById("") 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.getEle mentById("divPr icing").appendC hild( 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.selectedIn dex].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">Pr oduct One</option>
<option value="val2">Pr oduct Two</option>
<option value="val3">Pr oduct Three</option>
<option value="val4">Pr oduct 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.getEle mentById("divPr icing");
var divCopy = document.create TextNode(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.create Element("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]

web.dev wrote:

Frances wrote:

Frances wrote:

Frances wrote:
km0ti0n wrote:
>I fyou are getting ("document.getE lementById("") 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.g etElementById(" divPricing").ap pendChild( iframe );
>
>You should have the corrisponding HTML :
>
><div id="divPricing" > .... </div>
>
>Normally it's a typo....
>
>Also you are *STILL* using selItem =
>list.optio ns[list.selectedIn dex].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">Pr oduct One</option>
<option value="val2">Pr oduct Two</option>
<option value="val3">Pr oduct Three</option>
<option value="val4">Pr oduct 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.getEle mentById("divPr icing");
var divCopy = document.create TextNode(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.create Element("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.create Element("iframe ");
ifr.src = 'iframes/' + selItem + '.html';
ifr.scrolling = 'no';
ifr.style.borde rWidth='0'; // this only stuff that's not working..
document.getEle mentById("divPr icing").appendC hild(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