Inserire html utilizzando jquery .html()

Question

Desidero inserire una porzione grande di html in una pre-esistente <td>. Sto usando questo metodo:

$("td#content").html(LOTS_OF_HTML_CODE_HERE); 

Ma non funziona. Sono un noob, ci sono un sacco di citazioni e ' all'interno del chunk HTML che sembra spezzarlo. Qual è il metodo corretto per farlo?

Answer 1

Suggerisco di unificare l'html in una stringa ... in questo modo.

htmlStr = ""; 
htmlStr += "<p>some paragraph"; 
htmlStr += "<p>another paragaraph</p>"; 

$("#content").html(htmlStr); 

questo modo si può vedere dove il codice HTML è abbattere e aggiunge un sacco di leggibilità a JavaScript contenuti creati.

anche ...

se v'è contenuto in questo TD che si desideri mantenere, vorrei utilizzare il metodo append() jQuery.

---

il jquery documentation è il vostro migliore amico!

Answer 2

Probabilmente dovresti creare i tuoi elementi con jquery, piuttosto che con una stringa grande. Non si ottiene la certezza della correttezza della dom se si utilizza solo una stringa grande ed è quasi impossibile eseguire il debug o la modifica.

Questo è simile all'edificio xml a mano. Non è il modo migliore di farlo.

Answer 3

Quello che vorrei fare è di mettere tutto questo HTML in un div secondo: <div id="myHTML" style="display: none;">LOTS OF HTML HERE</div> poi quando fare questo:

$("td#content").html($("#myHTML").html()); 

Quale potrebbe essere il problema è a capo. Se hai una stringa (inclusa tra "" o ""), allora scoprirai che le interruzioni di riga "interromperanno" il tuo codice ... quindi dovrai mettere tutto l'HTML su una riga.

Answer 4

Stefan è giusto, ma per rispondere alla tua domanda con le citazioni, non dimenticate di sfuggire a tutto ciò che altrimenti romperlo, quindi se avete html("<a href='#' onclick='dofunction("text")'>...etc..."); ha bisogno di essere html("<a href='#' onclick='dofunction(\"text\")'>...etc..."); in modo che le virgolette di non essere letto letteralmente .

Answer 5

Se le virgolette stanno rompendo il codice, provare questo ...

$("td#content").html("<a href=\"http://www.example.com\">my link</a>");

Le virgolette non sono sfuggiti. Basta aggiungere una barra rovesciata prima delle virgolette, doppie o singole nel codice HTML. Questo dovrebbe farlo. ;)

Answer 6

Se è arrivato da un link, probabilmente si vorrà farlo con AJAX:

$("#YOUR_ELEMENT").load("THE_CONTENT_TO_LOAD"); 

Tuttavia, tenere a mente se si sta cercando di tirare HTML da un sito su un dominio diverso dovrai usare proxy server e tutte queste cose ... un po 'fuori dal campo di applicazione della domanda.

Answer 7

Javascript non ha un buon supporto per le stringhe multi-linea o la sintassi HEREDOC, ma ci sono alcuni accorgimenti.

aggiungere una barra rovesciata "\" alla fine di ogni riga per consentire al motore di script sa si sta continuando sulla riga successiva senza finitura:

<script> 
var my_html = '\ 
    <div id="my-div">\ 
     <span>Name:</span> Your Name\ 
    </div>\ 
'; 
</script> 

Utilizzare un CDATA XML Hack (http://mook.wordpress.com/2005/10/30/multi-line-strings-in-javascript/):

<script> 
var my_html = (<r><![CDATA[ 

    <div id="my-div"> 
     <span>Name:</span>Your Name 
    </div> 

]]></r>).toString(); 
</script>