mozilla / firefox innerHTML problem

[stinkybee]

I currently have a page that dynamically adds text boxes using innerHTML when required. All fine in ie but with firefox when a new box is added it clears any text you may have written in the previous box.

This suggests to me that firefox is adding the innerHTML to the original source code and not the current document code. Does anyone know how I can get firefox work with the actual content.

Here is a simple version of the code if you need it
Javascript:

function addBox() {
strBox = '<input type="text" value="">'
document.getElementById('imgBoxes').innerHTML+=strBox
}

HTML

<div id="imgBoxes">
</div>

So, when I add a box it appears ok. If I type something in the text box then add another the first one gets cleared. This only happens in Firefox.

 

[cLFlaVA]

add an element the way you're supposed to add an element, rather than using the innerHTML hack.

function addBox() {
    var b = document.createElement("input");
    b.type = "text";

    document.getElementById("imgBoxes").appendChild(b);
}

*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BabyJeffy]

InnerHTML has been supported by ALL browsers since about May 2000. Whilst it was initially introduced by Microsoft in their IE browser, very swiftly the other browsers adopted it. Apart from the clunky nature of using normal DOM methods, innerHTML is actually faster in several browsers! cLFlaVA's code is spot on - don't get me wrong... but I just wanted to point out that innerHTML is hardly a hack

So... moving on... if you wanted to continue using an innerHTML approach, I would look at adapting your code a little to see if it's an easy fix:

function addBox() {
  var currentHTML = document.getElementById('imgBoxes').innerHTML;
  document.getElementById('imgBoxes').innerHTML = currentHTML +  '<input type="text" value=""/>';
}

Let us know how you go!

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[kaht]

Yeah, so basically cory was wrong, go figure.

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[cLFlaVA]

kaht,

are you lonely lately? has the somewhat-recent birth of your first child left you feeling left-out? in need of attention? has your wife stopped coddling you? don't worry, pick on me relentlessly, you'll get all the attention you need.

Jeff,

ok, 'hack' was a strong word. i just feel like the innerHTML method is ghetto. i'm sure, however, that kaht and yourself will get nice [purple]lovin'[/purple] as always, as this site is fixed to ensure my failure.





*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[kaht]

I like the mohawk on the new headbanger icon. I'm sure if we could see behind it there would be a mullet

why is that image hosted on pregnancy.org? That's awesome.

-kaht

Looking for a puppy?

[small]Silky Terriers are small, relatively odorless dogs that shed no fur and make great indoor pets.[/small]

 

[cLFlaVA]

LOL! not too sure - I keep forgetting where the original headbanger was, although i seem to remember something like metalarchives.com or something, so i just search for "headbang smiley" any time i feel like rockin' out.



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[cLFlaVA]

only problem is the elephantitis of his hand (proteus syndrome rules!).



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[stinkybee]

BabyJeffy

thanks for replying but that way still has the same effect. As in, it still blanks the first text box if you try to add another.

cLFlaVA
Your way works well especially in conjunction with an innerHTML. You can append a div and then write the innerHTML to it.

Thanks again guys