Dynamically adding to a div

Michelle

I have a div that is initially empty. Clicking on a button will add some
text boxes and other controls so the user can add additional records. In
IE
all works fine but in Netscape 7.0 when I add another "record" the values
for all previous controls within the div are wiped out. In the javascript
function where I add on to the html in the div if I capture all the data in
the previous "records" then after adding the new record I can repopulate
all
the previous controls. I add to the div by getting the innerHTML. Is this
the best way to do this or is there another way to preserve the data?

--
Thank You.

Michelle

Aug 25 '05 #1

Subscribe Post Reply

39734

bwpearso

You can create tags and add them dynamically. This is probably better
than appending to innerHTML.

Here is a working sample that will get you started:

<html>
<head>
<script type="text/javascript">

function addStuff() {

var i = document.createElement( 'input' );
i.type = 'text';

var d = document.getElementById( 'mydiv' );
d.appendChild( i );
}
</script>

</head>
<body>
<div id="mydiv">
</div>
<button onclick="addStuff()">Add Stuff</button>
</body>
</html>

Brian Pearson.

Aug 25 '05 #2

RobG

Michelle wrote:

I have a div that is initially empty. Clicking on a button will add some
text boxes and other controls so the user can add additional records. In
IE
all works fine but in Netscape 7.0 when I add another "record" the values
for all previous controls within the div are wiped out. In the javascript
function where I add on to the html in the div if I capture all the data in
the previous "records" then after adding the new record I can repopulate
all
the previous controls. I add to the div by getting the innerHTML. Is this
the best way to do this or is there another way to preserve the data?

Is it the 'best' way? Depends, but it seems not.

innerHTML is a good quick 'n dirty way of modifying a document but as
there is no public standard for what it should do or how it should
behave, different implementations vary from Microsoft's implementation
in ways that you may only discover when you push the bounds of what it
can do.

innerHTML is good for writing text content for an element, even with a
bit of formatting, but going beyond that you may start to have problems.

innerHTML does not always reflect the dynamic changes that have been
made to a document - e.g. attached events or modified styles. This
stuff is quite inconsistent across browsers as you have just discovered.

For example, consider the following text input:

<div id="xx">
<input type="text" value="blah">
</div>
<input type="button" value="See innerHTML" onclick="
alert(document.getElementById('xx').innerHTML);
">

If you look at the innerHTML using IE, the content of the value
attribute will be whatever is actually in the input. In Firefox, the
content of the value attribute will always be 'blah' (i.e. what is in
the HTML source), regardless of changes the user may have made.

A more robust way to modify a document is by using the document object
model (DOM), which is based on open standards so you more consistent
support (but as always there are browser-specific quirks and foibles).

Add the following button to after the button above - it adds a new text
input:

<input type="button" value="Add an input" onclick="
var oInp = document.createElement('input');
oInp.type = 'text';
oInp.value = 'More blahdy blah blah';
document.getElementById('xx').appendChild(oInp);
">

Now if you look at the inner HTML, Firefox does not show the value
attribute of the new input, IE does (normally the code would be in a
separate, general function but this is just a demo).

innerHTML should never be used to modify a table, though it can be used
to write an entire table or modify the contents of a cell (TD element).
If you are adding form controls or such, then DOM is a much better solution.

If you post an example of what you are trying to do, you will likely get
some help with how to do your innerHTML stuff with DOM.
--
Rob

Aug 25 '05 #3

Michelle

I just tried this and works great. I will have to wait until tomorrow and
try it at work. At work I am actually adding table elements containing text
boxes, radio buttons, etc. I am using the table related tags for
positioning the elements. I am trying to create the table elements but
without success. Here I was trying the createTextNode but of course I did
not get the desired result.

function addData() {

var i = document.createElement( 'input' );
i.type = 'text';
var theDiv = document.getElementById("aDiv");

var existingHtml;
existingHtml = '<table><tr><td><input type="text"
name="address"/></td></tr></table>';
var j = document.createTextNode(existingHtml);

theDiv.appendChild( j );
}

Can I use the createElement for creating a table and the necessary <tr> and
<td> tags? I want something like this to be added to the div:

<table>
<tr>
<td><input type=text name=address></td>
</tr>
</table>

--
Thank You.

Michelle
"bwpearso" <br***********@gmail.com> wrote in message
news:11**********************@g44g2000cwa.googlegr oups.com...

You can create tags and add them dynamically. This is probably better
than appending to innerHTML.

Here is a working sample that will get you started:

<html>
<head>
<script type="text/javascript">

function addStuff() {

var i = document.createElement( 'input' );
i.type = 'text';

var d = document.getElementById( 'mydiv' );
d.appendChild( i );
}
</script>

</head>
<body>
<div id="mydiv">
</div>
<button onclick="addStuff()">Add Stuff</button>
</body>
</html>

Brian Pearson.

Aug 25 '05 #4

Michelle

This is what I came up with for creating the table in the div:

function addData() {

var i = document.createElement( 'input' );
i.type = 'text';
var theDiv = document.getElementById("aDiv");

var existingHtml;
existingHtml = '<table><tr><td><input type="text"
name="address"/></td></tr></table>';
var j = document.createTextNode(existingHtml);

var table = document.createElement( 'table' );
var tableBody = document.createElement('tbody');
var newrow = document.createElement("tr");
var newcol = document.createElement("td");

newcol.appendChild(i);
newrow.appendChild(newcol);
tableBody.appendChild(newrow);
table.appendChild(tableBody);

theDiv.appendChild( table );
}

--
Thank You.

Michelle
"Michelle" <md*****@mindspring.com> wrote in message
news:IvaPe.17382$g47.4452@trnddc07...

I just tried this and works great. I will have to wait until tomorrow and
try it at work. At work I am actually adding table elements containing
text boxes, radio buttons, etc. I am using the table related tags for
positioning the elements. I am trying to create the table elements but
without success. Here I was trying the createTextNode but of course I did
not get the desired result.

function addData() {

var i = document.createElement( 'input' );
i.type = 'text';
var theDiv = document.getElementById("aDiv");

var existingHtml;
existingHtml = '<table><tr><td><input type="text"
name="address"/></td></tr></table>';
var j = document.createTextNode(existingHtml);

theDiv.appendChild( j );
}

Can I use the createElement for creating a table and the necessary <tr>
and <td> tags? I want something like this to be added to the div:

<table>
<tr>
<td><input type=text name=address></td>
</tr>
</table>

--
Thank You.

Michelle
"bwpearso" <br***********@gmail.com> wrote in message
news:11**********************@g44g2000cwa.googlegr oups.com...
You can create tags and add them dynamically. This is probably better
than appending to innerHTML.

Here is a working sample that will get you started:

<html>
<head>
<script type="text/javascript">

function addStuff() {

var i = document.createElement( 'input' );
i.type = 'text';

var d = document.getElementById( 'mydiv' );
d.appendChild( i );
}
</script>

</head>
<body>
<div id="mydiv">
</div>
<button onclick="addStuff()">Add Stuff</button>
</body>
</html>

Brian Pearson.

Aug 25 '05 #5

RobG

Michelle wrote:

I just tried this and works great. I will have to wait until tomorrow and
try it at work. At work I am actually adding table elements containing text
boxes, radio buttons, etc. I am using the table related tags for
positioning the elements. I am trying to create the table elements but
without success. Here I was trying the createTextNode but of course I did
not get the desired result.

function addData() {

var i = document.createElement( 'input' );
i.type = 'text';
var theDiv = document.getElementById("aDiv");

var existingHtml;
existingHtml = '<table><tr><td><input type="text"
name="address"/></td></tr></table>';
var j = document.createTextNode(existingHtml);
That will create a text node that has the content of 'existingHTML' as
a string, it will not be parsed and rendered as if it were HTML or you'd
used innerHTML.

theDiv.appendChild( j );
}

Can I use the createElement for creating a table and the necessary <tr> and
<td> tags? I want something like this to be added to the div:
You can use DOM methods to create any HTML elements, there is a brief
(though a bit old) tutorial here:

<URL:http://www.oreillynet.com/pub/a/javascript/synd/2001/08/17/DOM-2.html>

The Mozilla DOM reference is reasonable:

<URL:http://www.mozilla.org/docs/dom/domref/>

The table interface is here;

<URL:http://www.mozilla.org/docs/dom/domref/dom_html_ref12.html#998953>

<table>
<tr>
<td><input type=text name=address></td>
</tr>
</table>

The equivalent using DOM is:

function addData() {

if ( ! document.getElementById ||
! document.createElement ) {
// getElementById or createElement are not supported
// handle error - substitute other methods or
return;
}

var theDiv = document.getElementById("aDiv");

if ( ! theDiv ) {
// couldn't find the div, handle error
return;
}

var oTable = document.createElement('table');
var oTb = document.createElement('tbody');
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
var oIp = document.createElement('input');
oIp.type = 'text';
oIp.name = 'address';

oTd.appendChild(oIp);
oTr.appendChild(oTd);
oTb.appendChild(oTr);
oTable.appendChild(oTb);
theDiv.appendChild(oTable);
}

The code could be reduced a little by using the insertRow method (the
tbody would not have to be created & added).

However, using a table for the above is not really suitable - you should
be using a div and CSS to do the layout. An alternative is to clone an
existing element, modify its attributes and add it.

You might also consider having all required elements in the page and use
script to hide/show them rather than creating them.
--
Rob

Aug 25 '05 #6

Michelle

Thanks Rob. You have been most helpful!!

--
Thank You.

Michelle
"RobG" <rg***@iinet.net.au> wrote in message
news:Ma****************@news.optus.net.au...

Michelle wrote:
I just tried this and works great. I will have to wait until tomorrow
and try it at work. At work I am actually adding table elements
containing text boxes, radio buttons, etc. I am using the table related
tags for positioning the elements. I am trying to create the table
elements but without success. Here I was trying the createTextNode but
of course I did not get the desired result.

function addData() {

var i = document.createElement( 'input' );
i.type = 'text';
var theDiv = document.getElementById("aDiv");

var existingHtml;
existingHtml = '<table><tr><td><input type="text"
name="address"/></td></tr></table>';
var j = document.createTextNode(existingHtml);

That will create a text node that has the content of 'existingHTML' as a
string, it will not be parsed and rendered as if it were HTML or you'd
used innerHTML.

theDiv.appendChild( j );
}

Can I use the createElement for creating a table and the necessary <tr>
and <td> tags? I want something like this to be added to the div:

You can use DOM methods to create any HTML elements, there is a brief
(though a bit old) tutorial here:

<URL:http://www.oreillynet.com/pub/a/javascript/synd/2001/08/17/DOM-2.html>

The Mozilla DOM reference is reasonable:

<URL:http://www.mozilla.org/docs/dom/domref/>

The table interface is here;

<URL:http://www.mozilla.org/docs/dom/domref/dom_html_ref12.html#998953>

<table>
<tr>
<td><input type=text name=address></td>
</tr>
</table>

The equivalent using DOM is:

function addData() {

if ( ! document.getElementById ||
! document.createElement ) {
// getElementById or createElement are not supported
// handle error - substitute other methods or
return;
}

var theDiv = document.getElementById("aDiv");

if ( ! theDiv ) {
// couldn't find the div, handle error
return;
}

var oTable = document.createElement('table');
var oTb = document.createElement('tbody');
var oTr = document.createElement('tr');
var oTd = document.createElement('td');
var oIp = document.createElement('input');
oIp.type = 'text';
oIp.name = 'address';

oTd.appendChild(oIp);
oTr.appendChild(oTd);
oTb.appendChild(oTr);
oTable.appendChild(oTb);
theDiv.appendChild(oTable);
}

The code could be reduced a little by using the insertRow method (the
tbody would not have to be created & added).

However, using a table for the above is not really suitable - you should
be using a div and CSS to do the layout. An alternative is to clone an
existing element, modify its attributes and add it.

You might also consider having all required elements in the page and use
script to hide/show them rather than creating them.
--
Rob

Aug 25 '05 #7

ASM

bwpearso wrote:

You can create tags and add them dynamically. This is probably better
than appending to innerHTML.

Here is a working sample that will get you started:

<html>
<head>
<script type="text/javascript">

function addStuff() {

var i = document.createElement( 'input' );
i.type = 'text';
something.type stops the function with my IE Mac
seems this IE has a bug (one more !)
it type is not set : all run correctly
(a kind of textbox is displayed)

var d = document.getElementById( 'mydiv' );
d.appendChild( i );
}
</script>

</head>
<body>
<div id="mydiv">
</div>
<button onclick="addStuff()">Add Stuff</button>
</body>
</html>

Brian Pearson.

--
Stephane Moriaux et son [moins] vieux Mac

Aug 25 '05 #8

ASM

RobG wrote:

innerHTML does not always reflect the dynamic changes that have been
made to a document - e.g. attached events or modified styles. This
stuff is quite inconsistent across browsers as you have just discovered.

For example, consider the following text input:

<div id="xx">
<input type="text" value="blah">
</div>
<input type="button" value="See innerHTML" onclick="
alert(document.getElementById('xx').innerHTML);
"> A more robust way to modify a document is by using the document object
model (DOM), which is based on open standards so you more consistent
support (but as always there are browser-specific quirks and foibles).

Add the following button to after the button above - it adds a new text
input:

<input type="button" value="Add an input" onclick="
var oInp = document.createElement('input');
oInp.type = 'text';
oInp.value = 'More blahdy blah blah';
document.getElementById('xx').appendChild(oInp);
">

Now if you look at the inner HTML, Firefox does not show the value
attribute of the new input,

Did I mistake ?

because new inputs are set in div 'xx'
if I press [See innerHTML]
FF(*) alert displays all html inside this div
(with attributes as 1st made)

of course, changes in values are not more rendered by [See innerHTML]

are these changes what you want to say by :
"Firefox does not show the value attribute of the new input"
(*) all my browsers except IE do the same as FF

--
Stephane Moriaux et son [moins] vieux Mac

Aug 25 '05 #9

ASM

Michelle wrote:

I just tried this and works great. I will have to wait until tomorrow and
try it at work. At work I am actually adding table elements containing text
boxes, radio buttons, etc. I am using the table related tags for
positioning the elements. I am trying to create the table elements but
without success. Here I was trying the createTextNode but of course I did
not get the desired result.

Do your add ons are allways the same ?

If yes

- display a table of one (or more?) rows styled in none
- clone this table as soon as you need to add inputs
- appendChild this clone and style it to block (or table? to verify)

on my idea, it's the simplier way to do

adding a row to a table example :
(was for different color betwen rows 1 and 2)
(in french, enter a number in 1st input then press [GO]
<http://perso.wanadoo.fr/stephane.moriaux/internet/web_dom/clones/test_clones_css_dom.shtml>
which doesn't work correctly with my IE

--
Stephane Moriaux et son [moins] vieux Mac

Aug 25 '05 #10

by: Aaron Ackerman | last post by:

I have a bound combobox the appears on a cell within the column of my bound grid when the user clicks on a cell n(In my vb.net WinForm app). I am trying to allow the adding of an item to that bound...

.NET Framework

Dynamically adding and removing methods

by: Steven D'Aprano | last post by:

Suppose I create a class with some methods: py> class C: .... def spam(self, x): .... print "spam " * x .... def ham(self, x): .... print "ham * %s" % x .......

Python

Failed to load viewstate when dynamically adding controls in placeholders

by: Sinisa Ruzin | last post by:

Hi all, I had problem with dynamically adding/removing controls;ascx, Controls.Add(Page.LoadControl... in the same page of the IBuySpy portal. ASP.NET, C#. I added buttons to the main ASCX loaded...

ASP.NET

Dynamically Adding ToolBar, and Buttons on MDI Child Window.

by: Byron Hopp | last post by:

Anybody have code to add a ToolBar, and its buttons to a MDI Child window. I have added the Toolbar, and added the buttons, but how do you determine what the button is going to execute upon the...

Visual Basic .NET

Using Dynamically Adding Controls on PostBack

by: Ben Dewey | last post by:

Okay, so I have a base Page class called ArticlesPageBase. This base class has reads in an overridable ArticleId and Loads the data into a Panel object in the ContentPlaceHolder of the Master. ...

ASP.NET

Problem with dynamically adding event handlers in IE - setAttribute and attachEvent

by: J | last post by:

I am having problems dynamically adding more than one event handler to an input. I have tried the Javascript included at the bottom. The lines inp.attachEvent('onkeyup',...

Javascript

Dynamically Adding Table Rows that contain IFrames with unique names.

by: Liquidtouch | last post by:

I'm not much of a HTML or Javascript programmer but have a little experience just hacking away at it. I am creating a HTML application and would like to be able to add or remove rows of a table....

Javascript

dynamically adding textbox

by: ganesh22 | last post by:

Hi, the below code is for dynamically adding textbox, but it will adding for same textbox only my requirement is how many times i click add button such times textbox will add for ex: if i click...

.NET Framework

EnableEventValidation exception when dynamically adding controls on client with JavaScript

by: Lewis Holmes | last post by:

Hi I have the following situation in one of my asp.net pages. The user can add multiple table rows to a form by selecting a button. These rows can contain asp.net controls. When this button is...

ASP.NET

Dynamically adding table row with a checkbox using javascript

by: vivek kapile | last post by:

Title:Dynamically adding table row with a checkbox using JavaScript Author:Vivek Kapile Email:snipped Language:JavaScript Platform:JavaScript in ASP.net Technology:Used in ASP.net...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Dynamically adding to a div

Similar topics