Connecting Tech Pros Worldwide Help | Site Map

Add content to existing div

  #1  
Old September 4th, 2008, 05:55 PM
question.boy@hotmail.com
Guest
 
Posts: n/a
I have been trying to find an example of how-to add html text to an
exisiting div and have had little success.

The best I found so far was

var pTag = document.createElement("p");
pTag.innerHTML = noBlanks[i]+" is a mandatory field.";
document.getElementById("FormErrors").appendChild( pTag);

However, I was hoping I could pass HTML code and not just text,
something more like

"New line added.<br />"

or anyother HTML Tag I may need to use.

Also, the code only seems to work in IE and not Firefox...?

Thank you for your help!

QB
  #2  
Old September 4th, 2008, 07:35 PM
Jeff Bigham
Guest
 
Posts: n/a

re: Add content to existing div


Assuming your div has an id attribute called "div_id", you can do
this:

var div = document.getElementById('div_id');
div.innerHTML = "<p><b>Whatever</bHTML that you may want.</p>";

-Jeff

On Sep 4, 9:54*am, question....@hotmail.com wrote:
Quote:
I have been trying to find an example of how-to add html text to an
exisiting div and have had little success.
>
The best I found so far was
>
var pTag = document.createElement("p");
pTag.innerHTML = noBlanks[i]+" is a mandatory field.";
document.getElementById("FormErrors").appendChild( pTag);
>
However, I was hoping I could pass HTML code and not just text,
something more like
>
"New line added.<br />"
>
or anyother HTML Tag I may need to use.
>
Also, the code only seems to work in IE and not Firefox...?
>
Thank you for your help!
>
QB
  #3  
Old September 4th, 2008, 07:35 PM
Joost Diepenmaat
Guest
 
Posts: n/a

re: Add content to existing div


question.boy@hotmail.com writes:
Quote:
I have been trying to find an example of how-to add html text to an
exisiting div and have had little success.
>
The best I found so far was
>
var pTag = document.createElement("p");
pTag.innerHTML = noBlanks[i]+" is a mandatory field.";
document.getElementById("FormErrors").appendChild( pTag);
>
However, I was hoping I could pass HTML code and not just text,
something more like
>
"New line added.<br />"
>
or anyother HTML Tag I may need to use.
You can.
Quote:
Also, the code only seems to work in IE and not Firefox...?
Ther error is somewhere else. This should work in FF; most browsers
support innerHTML, even though it's not officially standard.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
  #4  
Old September 5th, 2008, 04:15 AM
question.boy@hotmail.com
Guest
 
Posts: n/a

re: Add content to existing div


On Sep 4, 2:30*pm, Joost Diepenmaat <jo...@zeekat.nlwrote:
Quote:
question....@hotmail.com writes:
Quote:
I have been trying to find an example of how-to add html text to an
exisiting div and have had little success.
>
Quote:
The best I found so far was
>
Quote:
var pTag = document.createElement("p");
pTag.innerHTML = noBlanks[i]+" is a mandatory field.";
document.getElementById("FormErrors").appendChild( pTag);
>
Quote:
However, I was hoping I could pass HTML code and not just text,
something more like
>
Quote:
"New line added.<br />"
>
Quote:
or anyother HTML Tag I may need to use.
>
You can.
>
Quote:
Also, the code only seems to work in IE and not Firefox...?
>
Ther error is somewhere else. This should work in FF; most browsers
support innerHTML, even though it's not officially standard.
>
--
Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/- Hide quoted text -
>
- Show quoted text -

Here is the function in question. It works fine in IE but nothing in
Firefox.

function validate_form(theForm) {
/*Validates the user submitted data to ensure that data has been
input and that it is valid
and posts an error message if there is an issue.*/
var frmOk = true; //initialize validation status variable
var errColor = 'ffff99'; //background color when there is an error
in validation

// Create an array of controls to ensure that it wasn't left blank
var noBlanks = [ "FirstName", "LastName", "Address", "City",
"Province", "PostalCode", "TelResidential",
"TelBusiness", "TelCell", "Email", "Job"];

for ( i=0; i < noBlanks.length; i++ ){
if (isEmpty(document.getElementById(noBlanks[i]).value)) {

document.getElementById(noBlanks[i]).style.backgroundColor=errColor;

var pTag = document.createElement('p');
pTag.innerHTML = noBlanks[i]+" is a mandatory field.";
document.getElementById('FormErrors').appendChild( pTag);
frmOk = false;
}
}

if (frmOk == false) {
document.getElementById('FormErrors').style.displa y='block';
return false;
} else {
document.getElementById('FormErrors').style.displa y='none';
return true;
}
}

Any idea where I have made a mistake?

Thank you for your help,

QB
  #5  
Old September 5th, 2008, 04:15 AM
question.boy@hotmail.com
Guest
 
Posts: n/a

re: Add content to existing div


On Sep 4, 2:30*pm, Joost Diepenmaat <jo...@zeekat.nlwrote:
Quote:
question....@hotmail.com writes:
Quote:
I have been trying to find an example of how-to add html text to an
exisiting div and have had little success.
>
Quote:
The best I found so far was
>
Quote:
var pTag = document.createElement("p");
pTag.innerHTML = noBlanks[i]+" is a mandatory field.";
document.getElementById("FormErrors").appendChild( pTag);
>
Quote:
However, I was hoping I could pass HTML code and not just text,
something more like
>
Quote:
"New line added.<br />"
>
Quote:
or anyother HTML Tag I may need to use.
>
You can.
>
Quote:
Also, the code only seems to work in IE and not Firefox...?
>
Ther error is somewhere else. This should work in FF; most browsers
support innerHTML, even though it's not officially standard.
>
--
Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/- Hide quoted text -
>
- Show quoted text -
Might I ask you, what is officially the standard approach to doing
what I am wanting to do?
QB
  #6  
Old September 5th, 2008, 09:15 AM
Gregor Kofler
Guest
 
Posts: n/a

re: Add content to existing div


question.boy@hotmail.com meinte:
Quote:
Here is the function in question. It works fine in IE but nothing in
Firefox.
>
function validate_form(theForm) {
/*Validates the user submitted data to ensure that data has been
input and that it is valid
and posts an error message if there is an issue.*/
var frmOk = true; //initialize validation status variable
var errColor = 'ffff99'; //background color when there is an error
in validation
>
// Create an array of controls to ensure that it wasn't left blank
var noBlanks = [ "FirstName", "LastName", "Address", "City",
"Province", "PostalCode", "TelResidential",
"TelBusiness", "TelCell", "Email", "Job"];
>
for ( i=0; i < noBlanks.length; i++ ){
if (isEmpty(document.getElementById(noBlanks[i]).value)) {
>
document.getElementById(noBlanks[i]).style.backgroundColor=errColor;

Why gEBI? I suppose getElementsByName would be more appropriate. Due to
an "odd" implementation IE also populates the id property of elements
with names with the name value.

But it's IE only.

Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
  #7  
Old September 5th, 2008, 09:15 AM
Gregor Kofler
Guest
 
Posts: n/a

re: Add content to existing div


question.boy@hotmail.com meinte:
Quote:
On Sep 4, 2:30 pm, Joost Diepenmaat <jo...@zeekat.nlwrote:
Quote:
Quote:
>Ther error is somewhere else. This should work in FF; most browsers
>support innerHTML, even though it's not officially standard.
>>
>--
>Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/- Hide quoted text -
>>
>- Show quoted text -
Please don't quote signatures. And "- Show quoted text -". Get yourself
a decent newsreader like Thunderbird.
Quote:
Might I ask you, what is officially the standard approach to doing
what I am wanting to do?
The usual methods for manipulating the DOM: createElement(),
append/replace/removeChild(), ...

Gregor



--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
  #8  
Old September 5th, 2008, 09:25 AM
Joost Diepenmaat
Guest
 
Posts: n/a

re: Add content to existing div


question.boy@hotmail.com writes:
Quote:
On Sep 4, 2:30Â*pm, Joost Diepenmaat <jo...@zeekat.nlwrote:
Quote:
>Ther error is somewhere else. This should work in FF; most browsers
>support innerHTML, even though it's not officially standard.
>
Might I ask you, what is officially the standard approach to doing
what I am wanting to do?
QB
The "official" approach would be to generate each element, including
the TextNodes using the DOM API:

http://www.w3.org/TR/REC-DOM-Level-1...e-binding.html

Note that this can be significantly slower than using innerHTML in
some implementations if you're using many elements.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Closed Thread


Similar Threads
Thread Thread Starter Forum Replies Last Post
Add OBJECT in DIV Asterbing answers 4 December 1st, 2005 12:55 AM
How to display N records from a database in some Div's? Thanks. Shapper answers 3 November 19th, 2005 10:07 AM
help changing DIV content - want to put a javascript into the DIV rpesq@my-deja.com answers 2 July 23rd, 2005 09:55 PM
How to teach coworkers DIV & CSS? Woolly Mittens answers 40 July 20th, 2005 07:33 PM