- Quando utilizzare innerHTML e outerHTML -
  
COSA SERVE PER QUESTO TUTORIAL
 Download | Chiedi sul FORUM | Glossario cognizioni di base di HTML e Javascript
La disputa su innerHTML e compatibilità con gli standard

INNERHTML: QUANDO SERVIRSENE
Quando è indispensabile utilizzare innerHTML

Nel mondo dello sviluppo sul web l'uso della proprietà innerHTML è molto contestata in quanto non compatibile con gli standard (ovvero non definita negli standard W3C per il DOM, Document Object Model) e per il suo approccio all'HTML come stringa, contraria alla visione su cui è impostato l'intero DOM che lo intende invece come un albero di nodi (elementi, attributi, commenti, spazi, nodi di testo e così via). Tuttavia vi sono occasioni in cui utilizzare innerHTML è la scelta, oltre che più ovvia, più saggia, soprattutto considerando che, pur non essendo parte degli standard, essa è supportata dalla quasi totalità dei browser moderni (fin da Internet Explorer 4, Netscape 4, tutti i Firefox, Opera 7 e Konqueror 2). Inoltre la proprietà innerHTML è stata definita negli standard di HTML5, che tuttavia ancora non è diffuso. Effettivamente innerHTML andrebbe evitato quanto più possibile, poiché, anche se aumenta la velocità di stesura del codice, è in realtà un metodo sporco ed inelegante. Supponiamo tuttavia di avere una tipica situazione di una pagina in cui viene usato AJAX: in genere ad ogni richiesta corrisponde un responso che non può però essere sempre strutturato in maniera rigida.
Se è stata fatta una richiesta di informazioni di un cliente sarà semplice restituire un responso XML simile a quello che segue:

<responso>
    <cliente>
        <nome>Mario</nome>
        <cognome>Rossi</cognome>
        <biografia>Nasce a Roma, muore a Milano.</biografia>
    </cliente>
</responso>

Questo responso andrà poi interpretato tramite Javascript e quindi mostrato all'utente nella maniera più consona. Ma se il campo biografia dovesse contenere della formattazione? O peggio, se la richiesta fatta è una porzione di un vero e proprio documento HTML? Vediamo dunque un esempio più articolato:

<responso>
    <cliente>
        <nome>Mario</nome>
        <cognome>Rossi</cognome>
        <biografia>
            Nasce a <strong>Roma</strong>, 
            muore a <strong>Milano</strong>.
        </biografia>
        <articolo>
            <div>
                Una <a href="definzione_penna.html">penna</a>
                luminosa.
            </div>
            <div>
                <input type="button" onclick="alert('Ottima scelta')" value="Acquista">
            </div>
        </articolo>
    </cliente>
</responso>

In questo caso l'unica alternativa all'utilizzo di innerHTML sarebbe scrivere un parser in Javascript per poi effettuare chiamate a metodi standard del DOM, il che è del tutto inutile, in quanto questa funzionalità è già implementata in tutti i browser (in maniera certamente molto migliore e più prestante di quanto potrebbe fare il programmatore in Javascript) e si chiama innerHTML appunto.
In conclusione se è possibile strutturare in maniera rigida un responso di questo tipo e i suoi campi non contengono codice HTML, allora l'imperativo è usare il DOM, poiché ad esempio offrire un responso indipendente da chi lo richiede (in questo caso una pagina HTML che fa uso di AJAX) permette di riutilizzarlo come servizio in altri contesti senza apportare modifiche. Se invece dovete trasmettere codice HTML, il problema non esiste: bisogna utilizzare innerHTML.

OUTERHTML
Una versione cross-browser della funzione outerHTML

Internet Explorer (insieme a Safari, Opera e altri) mette a disposizione un'altra proprietà per tutti gli elementi oltre a innerHTML: outerHTML. Come il nome lascia intuire, se innerHTML restituisce/imposta il contenuto di un certo elemento, outerHTML restituisce/imposta il contenuto e l'elemento stesso:


<html>
    <body>
        <div style="color:red" id="div1">Contenuto vecchio 1</div>
        <div style="color:red" id="div2">Contenuto vecchio 2</div>
        <script type="text/javascript" language="javascript">
            document.getElementById("div1").innerHTML = "Contenuto nuovo 1";
            /* Non funziona su Firefox */
            document.getElementById("div2").outerHTML = 
                "<div style=\"color:green\">Contenuto nuovo 2</div>";
        </script>
    </body>
</html>

Tuttavia outerHTML non è supportato ampiamente come innerHTML (in particolare Firefox e tutti i browser derivanti da Gecko non la supportano), ma è facilmente implementabile come funzione su tutti i browser servendosi esclusivamente della proprietà innerHTML e di funzioni del DOM standard (quindi senza amplificare il "danno" rispetto all'uso di innerHTML):


function outerHTML(elm, html) {
    var elmNew = document.createElement("div");
    elmNew.innerHTML = html;
    	
    for(var elmContent = elmNew.firstChild;
    	elmNew.firstChild.nextSibling;
    	elmContent = elmNew.firstChild) {
    	
    	elm.parentNode.insertBefore(elmContent, elm);
    }
    	                	
    elm.parentNode.replaceChild(elmContent, elm);
}

La funzione non fa null'altro che creare un elemento DIV senza aggiungerlo a nessuna parte dell'albero HTML, ma impostando il suo contenuto tramite la proprietà innerHTML sul parametro html, quindi inserisce i figli prima dell'elemento da rimpiazzare e infine sostituisce l'elemento originale con l'ultimo figlio.

 
<< INDIETRO by VeNoM00