Newsgroup: it.comp.lang.javascript
Titolo: una questione di virgolette: ',", e poi?

Sto provando ad aggiungere degli elementi alla pagina con body.innerhtml +=
Ovviamente devo delimitare la stringa html dalle virgolette (diciamo 
"<div>...</div>". Tra questi nuovi elementi html ho un link dove per 
definire la proprietà onclick devo usare delle altre virgolette (diciamo 
'javascript:...'). Se ora devo inserire un alert(), quali altre 
virgolette devo usare?
 

Trovi alcuni esempi qui:
http://blog.opensourceopportunities.com/2007/10/nested-nested-quotes.html
 

 virgolette devo usare?
 
Non so qual'è il tuo scopo, ma secondo me stai facendo un bel
guazzabuglio di codice. Quel che si chiama, appunto, "spaghetti code".
Senza entrare nel dettaglio se usare o meno innerHTML, non hai bisogno
di specificare tutto negli elementi che inserisci, quando li inserisci.
Mi spiego. Assumendo che tu abbia qualcosa, tipo:
 
    var html = "<span><a href='foo.html'>foo</a></span>";
 
E tu voglia avere sul link un alert sul click, puoi tranquillamente fare:
 
    var div = document.body.appendChild(document.createElement("div"));
 
    div.innerHTML = html;
 
    var a = div.getElementsByTagName("a")[0];
 
    a.onclick = function(){
        alert("whatever.");
        return false;
    }
 
Una volta che hai aggiunto degli elementi, che sia tramite innerHTML o
DOM API, li puoi referenziare come faresti normalmente con elementi
presenti nel document tree.

 Mi spiego. Assumendo che tu abbia qualcosa, tipo:
 
Compreso. Grazie della lezione (in tutti i sensi).

>      var div = document.body.appendChild(document.createElement("div"));
Sto ricostruendo mentalmente il ragionamento che mi ha portato a fare 
spaghetti-code. Sapevo che si poteva fare cosï¿œ come mi hai indicato 
(anche se tu l'hai spiegato meglio di come io l'avrei immaginato, quindi 
il tuo impegno non ï¿œ stato vano).
Perï¿œ il div che devo aggiungere ha tante proprietï¿œ css che in html so 
aggiungere in un colpo solo (cosï¿œ: style="border... height... width... 
eccetera...") mentre in javascript, a quanto ne so, dovrei aggiungere 
una riga di codice per ciascuna proprietï¿œ, oltre al fatto, sempre a 
quanto ne so, che non tutte le proprietï¿œ sono supportate.
Questo non per giustificarmi, ma per far capire il ragionamento, 
contorto e sbagliato che sia, che mi aveva fatto preferire una strada 
diversa da quella piï¿œ naturale ed elegante.

 una riga di codice per ciascuna proprietà,
 
Non ho modo di verificare con IE al momento, ma molti browser accettano
anche l'assegnazione diretta:
 
    elemento.style = "border:1px solid #ddd; color: #444";
 
Che poi "spalmano" su varie proprietà. Inoltre ricordati che puoi sempre
fare (ma qui, dubito che IE7 gestisca correttamente il binding della
proprietà):
 
    elemento.setAttribute("style", "border:1px solid #ddd; color:#444");
 
Che se non altro, rispetto al codice direttamente nell'innerHTML, ti
risparmi una coppia di delimitatori stringa, e il codice è più separato
(qui stai assegnando solo uno style, non una massa di stringhe che devi
analizzare per capire).
 
Ma, ancora, a parer mio questo dovrebbe essere evitato laddove
possibile. Quando hai da assegnare diversi valori CSS in una botta sola
in questo modo, soprattutto alla creazione dell'elemento, allora
dovresti avere una classe CSS. Anche dovessi scriverlo direttamente
usando innerHTML sarebbe più semplice:
 
    elemento.innerHTML = "<div><span class='foo bar'>Foo</span></div>";
 
Mentre a livello di codice:
 
    elemento.className = "foo bar";
 
Inoltre ottieni un'ulteriore rimozione di spaghetti-code: come hai detto
tu, stai definendo roba CSS tramite JS che le inietta nel documento
usando una stringa HTML. Lo vedi dove sta il "groviglio" di spaghetti?
 
Ricorda, come linee guida, che una pagina web è un po' come il pattern
Model View Controller. Hai l'HTML che definisce i dati della pagina, la
struttura che vuoi visualizzare; hai i CSS che definiscono il come la
pagina viene visualizzata; e hai JavaScript che definisce il
comportamento della pagina, la sua logica.
Se quando sviluppi ti chiedi se il tuo codice sta seguendo tale
suddivisione, vedrai che arriverai ad avere codice più leggibile e
soprattutto manutenibile.