dom tree in internet explorer - appendChild, removeChild

**DrugsMatt** · 05-10-2011, 14:42

Ciao a tutti,
ho un problema con la gestione degli oggetti dom in internet explorer, sto sviluppando un codice che mi permetta di costruire dinamicamente una tabella ma funziona solo in Firefox, ho notato che il problema si presenta durante la necessità di includere alla pagina degli elementi come i div o appunto table, tr, td ecc..

Posto la porzione di codice che sistema gli oggetti nel documento, premetto che ogni elemento è stato creato utilizzando createElement e gli son stati dati gli attributi con setAttribute, per gli eventi legati ai link come gli onclick ho utilizzato attachEvent('onclick', myfunction) e funziona a dovere, rimane da capire la questione dell'object tree, qua li aggiunge con appendChild.

codice:

                             newDiv.appendChild(newTab);
				 newTab.appendChild(newTr1);
				 newTab.appendChild(newTr2);
				 newTab.appendChild(newTr3);
					newTr1.appendChild(newTd1);
					newTr1.appendChild(newTd4);
					newTr2.appendChild(newTd2);
					newTr3.appendChild(newTd3);		
					   newTd1.appendChild(newA);
					   newTd1.appendChild(textAfterUserName);
					   newTd2.innerHTML=linked;
					   newTd3.appendChild(textWhenPosted);
					   newTd4.appendChild(delMex);
					      newA.appendChild(userName);
						delMex.appendChild(newImg);

var bodyTags = document.getElementsByTagName("body");
	var thisBody = bodyTags[0];
	
	thisBody.appendChild(newDiv);

Ho fatto anche dei test con il metodo insertBefore e ho notato che in occasioni come questa di seguito funziona, ma non riesco lo stesso a creare un div con tabella..

codice:

var bodyTags = document.getElementsByTagName("body");
var thisBody = bodyTags[0];
var oParentNode = document.createElement("div");
var oNode = document.createElement("b");
var oText = document.createTextNode("ciao");
thisBody.insertBefore(oParentNode);
oParentNode.insertBefore(oNode);
oNode.insertBefore(oText);

questo stampa un div con all'interno un elemento [b] e il testo.

Qualche suggerimento sul codice da adottare in IE per costruire un obj tree ben fatto? Grazie in anticipo

**Xinod** · 05-10-2011, 15:36

quando si manipola il DOM di una tabella accertati di avere un tbody nel markup e di appendere ad esso le righe, piuttosto che alla tabella stessa

perche' il DOM non e' il markup, ma come il browser lo interpreta
se non c'e' un tbody nel markup alcuni browser lo considereranno ugualmente presente e ti permetteranno solo di appendere ad esso,
mentre altri accetteranno di appendere <tr> direttamente a <table>
se invece e' fisicamente presente e appendi ad esso le righe non c'e' rischio per il browser di sbagliare

verifica che sia questo il caso

**DrugsMatt** · 05-10-2011, 16:53

Ho dato un'occhiata al tbody, ho provato a creare questo esempio:

codice:

<html>
<body>
<span>Span</span>

<script type="text/javascript">
  
var bodyTags = document.getElementsByTagName("body");
var thisBody = bodyTags[0];
var newTable = document.createElement("tbody");

var newTr = document.createElement("tr");

var newTd = document.createElement("td");
		
var newTextTd = document.createTextNode("messaggio utente...");


thisBody.appendChild(newTable);
newTable.appendChild(newTr);
newTr.appendChild(newTd);
newTd.appendChild(newTextTd);


</script>
</body>
</html>

sia che metta <tbody> o <table> in Firefox funziona, in IE no (uso IE 8.0), quale può essere la ragione?

**DrugsMatt** · 05-10-2011, 17:03

ahh ok ok chiaro ho confuso...

codice:

var newTable = document.createElement("table");
		
var newTbody = document.createElement("tbody");

...
...

thisBody.appendChild(newTable);
newTable.appendChild(newTbody);
newTbody.appendChild(newTr);
newTr.appendChild(newTd);
newTd.appendChild(newTextTd);

ora la visualizza.. spero sia solo questo il problema, ho uno script più complesso da modificare.. farò qualche prova, grazie mille intanto!!

**DrugsMatt** · 05-10-2011, 17:51

ok ora mi è saltato all'occhio un altro problema..
mi stampa la tabella con tutto l'occorrente, il problema sta nel link che deve cancellare il messaggio, è configurato correttamente in modo che cancelli solo il singolo messaggio, solo che la funzione non sembra girare su IE, fa click a vuoto

inizialmente per FF uso:

delMex.setAttribute('onClick','delMessage(this);') ;

Poi ho scoperto che IE richiede attachEvent:

delMex.attachEvent('onclick', delMessage);

Ma non posso passargli il parametro this.. così ho provato un workaround:

delMex.onClick = function(){delMessage(this);};

ma non va nemmeno questo... forse sbaglio nel passare il parametro? c'è un metodo preciso?

**Xinod** · 05-10-2011, 21:19

e' onclick, non onClick

**DrugsMatt** · 05-10-2011, 22:52

l'ho corretto ma nulla, ho visto che IE mi da un errore (invalid argument) relativo a una riga presente proprio nella funzione delMessage(myObj) addetta alla rimozione della tabella.

codice:

function delMessage(myObj) {
	
	var divToDel = myObj.parentNode.parentNode.parentNode.parentNode;  //div con messaggio
	var bodyTags = document.getElementsByTagName("body");
	var thisBody = bodyTags[0];
	thisBody.removeChild(divToDel);
}

la riga dell'errore è l'ultima:
thisBody.removeChild(divToDel);

può essere che non gli piace il riferimento del div (var divToDel) che contiene tutta la tabella?
Perchè il link sta in un <td>, quindi per risalire al div ho dovuto usare 4 parentNode...

**DrugsMatt** · 05-10-2011, 23:02

ovviamente ho dimenticato di aggiungere il parentNode per il tbody.... ora funge!

grazie di tutto Xinod

**Xinod** · 05-10-2011, 23:25

di nulla
ciao

Discussione: dom tree in internet explorer - appendChild, removeChild

Strumenti discussione

Ricerca discussione

Visualizza

dom tree in internet explorer - appendChild, removeChild

Permessi di invio