472,780 Members | 4,850 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,780 software developers and data experts.

innerHTML / Appendchild question

Hi folks;

I have this webpage, allowing users to insert multiple records in one post
into the database.

Because I don't know the exact number of records they want to add, I created
a little javascript
that adds a new line with HTML inputboxes and lists to the form if they
press a button.

My first version of the script used innerHTML to add the new line of HTML
It works great in IE. But in NS/Mozilla each time I add new items the
already existing textboxes
(filled in) and already existing listboxes (with selected items) 'loose'
their data or selections.

var newhtmltoadd = '<input type=....' // The new line of html to add.
document.newline.innerHTML = document.newline.innerHTML + newhtmltoadd;

So I figured out this innerHTML way might not be the most fancy solution to
my problem and
I tried by the using the more DOM approach : appendChild

But the problem remains the same. Works fine in IE, NS/Mozilla reinitialise
my exisiting form objects in the area where I append.

Here is my appendChild code

var listbox=document.createElement('select');

//fill listbox with data from similar existing listbox

i=0;i<document.getElementById('FkRelie-New-1').length;i++) {

document.getElementById('NewPtLeft').appendChild(l istbox);

Now. Is this a NS/Mozilla problem or am I doing something wrong?
How can I preserve state from my already exising form objects when adding
new ones in NS/Mozilla?

Thanx in advance,

Jul 23 '05 #1
1 2733
Nicolas Van Lancker wrote:
Here is my appendChild code

var listbox=document.createElement('select');
listbox.setAttribute("name","FkRelie-New-"+id); ^^^^ ^^^^^^^^^^^^
The implication of this attribute creation is that the existing SELECT
elements also have name attributes taking the form - FkRelie-New-1 -,
but the fact that you are not setting an ID attribute at this point
suggest that the existing SELECT elements do not have corresponding ID

Incidentally, using - setAttribute - is generally less successful than
assigning values directly to the corresponding W3C HTML/Core DOM
specified object properties.


//fill listbox with data from similar existing listbox

i=0;i<document.getElementById('FkRelie-New-1').length;i++) { ^^
But here you are using the - getElementById - method to acquire a
reference to an existing select element. In a normal context (no custom
DTD) the "Id" at the end of - getElementById - means what it says; only
elements with ID attributes should be expected to be retrievable using
that method. The IE implementation of - getElementById - is buggy and
will return references to elements that only have corresponding NAME
attributes (because it is optimised to make the reference in a
collection that contains properties corresponding with the NAME
attributes of elements in addition to ID attributes) but no other
browsers are known to exhibit that flaw.

Generally, the retrieval of references to form control within HTML pages
is better done using the W3C HTML DOM specified - document.forms - and -
elements - collections, which make controls with NAME attributes
directly available (along with elements that have ID attributes) as
named properties.
Now that is a little odd; you create and assign an Option element and
then immediately create a second Option element and use it to replace
the first.

The repeated element retrieval for the same element is extremely
inefficient, it would make more sense to retrieve the reference to the
element once and assign it to a local variable. Which would also allow
you to verify that the retrieval attempt was successful before acting on
what you are otherwise assuming is an object (but may be null under some

<snip> Is this a NS/Mozilla problem or am I doing something wrong?


Mozilla, and all other Gecko based browsers, are extremely good at what
you are attempting to do here (better than IE in some respects), so if
it isn't working it is going to be your coding that is at fault.

Jul 23 '05 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: necromonger | last post by:
Hi, I've got this code that creates a new new row and cell. I then put some text into the cell with innerHTML - works beautifully with Firefox but fails with IE. I guess IE doesn't support this...
by: jhcorey | last post by:
I am doing some maintenance on a js tree control that was done with proprietary IE code. When I click on a node it calls a function which has code similar to that below to expand the tree. "el"...
by: RobG | last post by:
I know you aren't supposed to use innerHTML to mess with table structure, but it seems you can't use it just after a table without damaging the containing element. I added a table to a div using...
by: writeOnceDebugEverywhere() | last post by:
- I believe it is a simple question: my onclick event for the button looks as follows: ...... // reference to the <div id="messages" : var mDiv=document.getElementById('messages');...
by: Jake Barnes | last post by:
This weekend I wanted to learn AJAX, so I set up a little toy page where I could experiment. The idea of this page is that you click in one of the boxes to get some controls, at which point you can...
by: CES | last post by:
All, Visual Studio 2005 doesn't include an auto complete item for innerHTML document.getElementById("SomeID").innerHTML, is their a way of referencing the inner text of an element without using...
by: sonic | last post by:
Ok, i am sure everyone is sick of hearing about this. but i've checked about 10 different posts/sites about this issue, and they all say "use DOM" but i think there is more to be said. Perhaps I...
by: martymix | last post by:
simple question: I have a simple <dt>test text</dt> I get the innerHTML of that dt, and I try and append some text to it like so: dt = document.getElementsByTagName('dt') var text =...
by: Dan Andrews | last post by:
Hello, I was wondering what is the correct way to handle special characters via javascript and the DOM. I would like to avoid document.write and innerHTML. What I am doing is dynamically...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.