'String contiene un carattere non valido' quando si utilizza document.createElement()

2013-08-23 15 views
6
var NewRow = document.createElement("<tr><td align='left' valign='top' width='9%;' ><img width='32px' height='32px' src='images/" + ProfilePic + "' /></td><td align='left' valign='Top' ><span class='MsgSpan'>" + Msg + "</span></td><td align='right' align='left' valign='top' style='color:Gray;' >" + Date + "</td></tr>"); 

sto ottenendo un errore:'String contiene un carattere non valido' quando si utilizza document.createElement()

InvalidCharacterError: String contains an invalid character 

Come posso risolvere questo problema?

risposta

10

La stringa passata a document.createElement è il tipo di elemento, ad esempio tr.

Se si vuole veramente per assemblare il codice HTML come un grande stringa, suppongo che si potrebbe scrivere:

var newRow = document.createElement('tr'); 
newRow.innerHTML = "<td align='left' valign='top' width='9%;' ><img width='32px' height='32px' src='images/" + ProfilePic + "' /></td><td align='left' valign='Top' ><span class='MsgSpan'>" + Msg + "</span></td><td align='right' align='left' valign='top' style='color:Gray;' >" + Date + "</td>"; 

ma è probabilmente più pulito/più veloce/più sicuro da usare manipolazione del DOM per il tutto.

+0

'NewRow' dovrebbe essere' newRow' sulla prima riga. –

+0

@KevinBeal: buona chiamata; fatto, grazie. – ruakh

0

La risposta recente andrà bene, Ho una risposta simile .., Ho definito gli elementi in modo che sia facile eseguire il debug.

var ProfilePic = "abl.jpg"; 
var Msg="Hi"; 
var Date = "June 10, 2010"; 
function doit() { 
    var NewRow ="<tr><td align='left' valign='top' width='9px' ><img width='32px' height='32px' src='images/" + ProfilePic + "' /></td><td align='left' valign='Top' ><span class='MsgSpan'>" + Msg + "</span></td><td align='right' align='left' valign='top' style='color:Gray;' >" + Date + "</td></tr>"; 
    var element = document.getElementById("tbl_body"); 
    element.innerHTML +=NewRow; 
} 

questo funziona come fascino per me .. il problema con il codice precedente era createElement .. ma questo funzionerà il resto è necessario creare fila, poi td quindi testo e li aggiunge ...

Spero che ciò accada ..

+0

Stai suggerendo (s) di cambiare 'style = 'color: Gray;'' to 'style = 'color: Gray''? Fidati di me, questo non farà differenza; quelle notazioni sono equivalenti al 100%. – ruakh

+0

@ruakh Ho aggiornato la mia risposta, per favore fatemi sapere se grazie – MarmiK

Problemi correlati