By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,741 Members | 1,979 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,741 IT Pros & Developers. It's quick & easy.

Dynamically adding to a div

P: n/a
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
Share this Question
Share on Google+
9 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.