[JS] Dodawanie do DOM IE7 się sypie, reszta OK

Ktoś ma pojęcie dlaczego ten kod, który tworzy prosty formularz działa pod najnowszą Operą i Firefoxem, a na Internet Explorerze(64 bit pod Windą 7) się sypie?
Tzn. zamiast inputa o właściwości "submit", wyświetla textowego...

  var x = document.getElementById("ARE");
            var i1 = document.createElement("input");
            var br = document.createElement("br");
 	 var i3 = document.createElement("textarea");
 	 var i4 = document.createElement("input");

 		    		    
            x.appendChild(i1); // input do wpisania
            x.appendChild(br); // enter
            x.appendChild(i3); // textarea do zawartosci
            x.appendChild(br); // enter
            x.appendChild(i4); // input submit

            i3.id = "mama";
            i1.id = "tata";
            i4.id = "dziadek"; // submit

            var yy = document.getElementById("tata"); // input content
            yy.size = 30;
            yy.value = "Write here your nick...";

            yy = document.getElementById("mama"); // textarea
            yy.style.border = "1px solid black";
            yy.cols = 35;
            yy.rows = 5;
            yy.value = "Content of your message type here...";

            yy = document.getElementById("dziadek"); // textarea
            yy.type = "submit";
            yy.value = "Say it!"; 

natomiast przy usuwaniu (ukrywaniu) formularza znów IE daje się we znaki bo zamiast usunąć z DOMa... dodaje nowe do tych które dodałem wcześniej ; o.. jak dla mnie jakaś masakra:

                var el = document.getElementById("ARE");
	  	    el.removeChild(el.lastChild); 
  		    el.removeChild(el.lastChild); 
  		    el.removeChild(el.lastChild); 
  		    el.removeChild(el.lastChild); 
  		    el.removeChild(el.lastChild); 

wszystko hula na Operze i FF ;)
co poprawić?

Jeśli byłbyś tak miły i wkleił kod przykładowego dokumentu HTML do testowania, to moglibyśmy Ci łatwiej pomóc. Chodzi o gotowy plik, z niezbędnymi inputami i wstawionym kodem JavaScript -- jak najmniejszy (bez niepotrzebnych dupereli, jeśli dasz radę je wyciąć), ale działający.

Na razie mam następujące uwagi:
-Chyba najważniejsza: nazwy zmiennych! To już nie ja Cię proszę, Ty sam -- z przyszłości! -- się prosisz! Będziesz kiedyś patrzył na ten kod i się zastanawiał, co to do cholery było i3, a co i4. Przy okazji podpowiem Ci, który z tzw. "brzydkich zapachów" w kodzie sugeruje, że coś musisz zmienić. Komentarze. Widzisz? Masz je przy tej serii appendChild. Jeśli musisz komentować nazwy zmiennych, to znaczy, że są złe. Zamiast używać nazwy i4 i pisać w komentarzu "input submit", to daj zmiennej nazwę inputSubmit lub nazwet submit. Zauważ proszę, że te komentarze, co masz, są miejscami błędne! To naprawdę poważny sygnał alarmowy. Ostatni komentarz to "textarea", a tak naprawdę, w zmiennej yy jest input typu submit. Nazwa br, jeśli jest tam element
, jeszcze ujdzie.
-Nazwy ID w dokumencie w tym przykładowym kodzie też są chyba bez sensu. Tata? Mama? Dziadek? Czy to program do tworzenia drzewa genealogicznego?
-Nie polecam też używania tej samej zmiennej (yy) do różnych rzeczy. Jeśli masz to w jednym zasięgu, użyj zmiennych z początku funkcji (tych, które zwą się i3, i4 itp.). Zauważ, że wtedy getElementById nie będzie tu nawet potrzebne: już masz referencję do "dziadka" w zmiennej i4!
-Sekwencja pięciu wywołań removeChild(el.lastChild) jest dla ludzi z pierwszej lekcji programowania. My jesteśmy fajni i znamy pętle :). Jeśli chcesz usunąć 5 elementów, to for. Jeśli wszystkie, to while. Albo w tym drugim wypadku lepiej użyj el.innerHTML = ''. Szybsze, prostsze.

Powyższe uwagi są ekstremalnie ważne, jeśli faktycznie masz w kodzie takie coś, jak wkleiłeś. Jeśli to tylko przykładowy kod, tzn. po wklejeniu ocenzurowałeś nazwy zmiennych itp, to niektóre (lub wszystkie) powyższe uwagi nie muszą mieć zastosowania. Jeśli jednak pierwszy listing to faktyczny, pełny wycinek kodu, to bierz się do refaktoryzacji. Zobaczysz, że z kodem będzie się dużo przyjemniej i sprawniej pracowało. No i to getElementById możesz wywalić.

Co do samych problemów z submitem, to strzał w ciemno:
-Ustaw input.type na "submit" jeszcze ZANIM wstawisz input do DOM. Bo zauważ, że teraz przeglądarka musi stworzyć domyślne pole tekstowe, wstawić je do DOM, narysować na stronie itp., a nagle chcesz zmiany atrybutu type tak, że całe pole przestaje wyglądać jak pole tekstowe i zaczyna wyglądać jak przycisk. Może od tego IE protestuje.

po co to "getElementById()"? przecież masz te elementy, bo je stworzyłeś w tej samej funkcji. spróbuj ustawić wszystkie właściwości elementów PRZED ustawieniem ich rodzica.
"removeChild()" zrób w pętli while, bo IE pusty tekst też traktuje jako element. dodanie elementów zamiast ich usunięcia? nie wierzę. możesz spróbować document.getElementById("ARE").innerHTML = "";

[dopisane]
kurczę, bs wziął był mnie ubiegł

dzięki chłopaki, wszystkie wasze rady były pomocne!
co do elegancji kodu... śpiesze się , to większy projekt (na zaliczenie) także ctrl+c ctrl+v, wiem że złe nawyki, ale czas to pieniądz! : P
ważne że działa

@KlyYmek:
Nie zapominajmy tylko, że akurat w naszej branży podczas studiów najważniejsze jest nauczenie się czegoś, a dopiero w drugiej kolejności zdobycie papierka. Jasne, jak termin goni i nie ma czasu się starać, to trudno -- raz kiedyś taka sytuacja się zdarza. Ale jeśli wszystkie projekty tak mają wyglądać, to jest to sygnał ostrzegawczy. Chyba że gdzieś na boku robisz projekty według własnego pomysłu i do nich się przykładasz. Jeśli jednak nie piszesz tak na 105% swoich umiejętności niczego lub prawie niczego, to podejście pewnie trzeba będzie zmienić wcześniej niż na ostatnim roku studiów, bo potem człowiek wyłazi z uczelni, a tak naprawdę to jest dupa a nie programista. A tak, niektórzy zostają wcale-nie-Junior programistami zaraz po studiach (albo i na). Zdarzają się i tak młodzi niby Senior-Developerzy, choć tu już spore znaczenie mają standardy firmy.

A tak w ogóle, jeśli projekt większy, to przeważnie opłaca się pisać go w miarę składnie. Bo im więcej masz kodu, tym takie "i5", "foo" i "bary" bardziej zaczynają gryźć.

Tak tylko piszę na wypadek jakbyś się kiedyś zastanawiał co będziesz myślał po studiach na temat tego co robiłeś. Czas poświęcony na projekty pisane na odpieprz uważa się zwykle za zwyczajnie stracony, ew. z konieczności stracony (bo zaliczyć trzeba...). Akurat tutaj masz projekt oparty o JS, technologii coraz bardziej popularnej i wręcz lobbowanej, m.in. przez Google (bo mają web-appsy) i przez Apple (bo nie lubią alternatywy, czyli Flasha). Wchodzą elementy z HTML5 takie jak <canvas> i koniec końców, jeśli będziesz chciał pracować w okolicach branży webowej (która się dynamicznie rozwija -- możliwości coraz większe), to JavaScript prawdopodobnie się przyda -- możliwe, że bardzo. A DOM to w ogóle abstrakcyjny interfejs i używany jest nie tylko w branży webowej. A że jest niewygodny, to inna sprawa.

Wszystko rozumiem, ale po prostu nie chce mi się teeraz tego kodu upiększać... bo tak jak wspominałem:

1. nie mam czasu
2. moim zdaniem ważna jest merytoryka, umiejętnośc rozwiązywania problemów
3. JS w tym projekcie to jakieś 20%, także jest po prostu mało ważny, prowadzący nawet do niego nie zajrzy, jeśli wszystko będzie działać

i wcale nie robię projektu na odpieprz ;)
ale... poruszyłeś moje sumienie i już zmieniam nazwy zmiennych i dodaje ową pętelkę :)
uwierz, że gdybym miał czas... dodałbym średniówkę i rymy do tego kodu ;)

@KlyYmek:
Spoko. Ja nie wyrobiłem sobie o Tobie żadnego zdania; nigdzie nie stwierdziłem, że cienki z Ciebie koder czy że kodujesz zawsze na odwal. Wiem jednak, że na studiach wiele osób nie przykłada do jakości kodu należytej wagi. Ale wiem też jaka jest rzeczywistość. Chyba każdy z nas tworzy (lub chociaż stworzył parę razy) nawet poważny, "komercyjny" kod, z którego nie byłby najbardziej dumny.

Do Ciebie należy ocena czasu, środków i priorytetów. Ja nie znam tego całego kontekstu i dlatego właśnie nawet nie próbuję Ci ocenić. Oceniam tylko kod, który zamieściłeś i ostrzegam przed pewnymi pułapkami, jakie czyhają na... dojrzewających programistów, że się tak wyrażę ;). Co z tym zrobić, to już Twoja decyzja.

Choć te nazwy zmiennych czy pętelki to w sumie podstawowe rzeczy i fajnie, że uda Ci się je wcisnąć do harmonogramu.

KlyYmek napisał(a)

moim zdaniem ważna jest merytoryka, umiejętnośc rozwiązywania problemów

Co do umiejętności rozwiązywania problemów to owszem, jest ona bardzo ważna. Rzeczywiście: chyba najważniejsza (poza zdolnością nauki). Ale powiem Ci jeszcze bardzo ważne, mądre spostrzeżenie. Mądre, bo nie ja je wymyśliłem, tylko ktoś mądry. Są dwa produkty pracy programisty związane z samym kodem. Pierwszy to to, o czym mówisz: działanie kodu. Czy i jak (jak szybko, a nawet jak wygodnie dla użytkownika) kod rozwiązuje problem. Drugi produkt jest jednak niemal równie ważny: to łatwość utrzymywania kodu, tj. łatwość rozszerzania, modyfikacji, poprawiania itp.

Wielu z nas pracuje tutaj nad projektami, które są utrzymywane przez 5, 10, czy więcej lat. Ja staram się omijać takie projekty, m.in. ze względu na rozkład oprogramowania, ale i tak często pracuję z kodem mającym rok czy dwa. I nawet tutaj czas poświęcony na zapewnienie jakości kodu, na pisanie automatycznych testów, po prostu się opłaca. Opłaca się czasowo i finansowo. W mniejszych projektach często też się opłaca. Jeśli w przyszłości będziesz pracował nad większymi projektami, to w dobrej firmie będą oczekiwali od Ciebie jakości kodu praktycznie w takim samym stopniu, jak umiejętności rozwiązywania problemów. Tę ostatnią umiejętność przeważnie nabywamy jako pierwszą. I jak już potrafimy napisać w zasadzie dowolny program, w ten czy inny sposób (chyba że nam się po drodze rozleci), to wtedy... mamy jeszcze przed sobą sporo nauki z dziedziny inżynierii oprogramowania (IO). Zresztą, jeśli jesteś na uczelni technicznej, to będziesz miał IO na zajęciach. Tyle że studenci często ją olewają, a to bardzo ważne przedmioty. Współpraca w zespole, dbanie o jakość kodu to codzienność dla bardzo wielu programistów.

A jeśli to wszystko doskonale już wiesz (ja na początku studiów jeszcze nie bardzo wiedziałem), to tym lepiej -- najwyżej strzępiłem sobie klawisze niepotrzebnie. Tak czy siak, powodzenia z projektem :)

Projekt zaliczony. 20/20
Jestem dopiero na II roku Informatyki na Politechnice, więc IO jeszcze nie było.
Mądre rzeczy piszesz :) Pewnie to, że nie pracowałem jeszcze w zespole większym niż 2osobowy, sprawia, że nie przywiązuję zbyt wielkiej wagi do kodu... ale będe się starał :)
Dzięki za pomoc!