Insertar html usando jquery .html()

Question

Quiero insertar un gran trozo de html en un <td> preexistente. Estoy utilizando este método:

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

Pero no funciona. Soy un novato, hay un montón de citas y ' dentro del fragmento de HTML que parece estar rompiéndolo. ¿Cuál es el método correcto para hacer esto?

Answer 1

Sugeriría unificar el html en una cadena ... como tal.

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

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

esta manera se puede ver en su html está rompiendo y se agrega una gran cantidad de lectura al contenido creado Javascript.

también ...

si hay contenido en este TD que desea mantener, me gustaría utilizar el método append() jQuery.

---

jquery documentation es tu mejor amigo!

Answer 2

Probablemente esté creando sus elementos con jquery, en lugar de hacerlo con una cadena grande. No tiene la certeza de la corrección del dom si solo usa una cadena grande, y es casi imposible de depurar o modificar.

Esto es similar a construir xml a mano. Simplemente no es la forma preferida de hacerlo.

Answer 3

Lo que quiero hacer es poner todo eso HTML en un div según: <div id="myHTML" style="display: none;">LOTS OF HTML HERE</div> luego, cuando ello:

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

¿Cuál podría ser el problema es los saltos de línea. Si tiene una cadena (encerrada en "" o ""), encontrará que los saltos de línea "romperán" su código ... por lo que tendrá que poner todo el HTML en una línea.

Answer 4

Stefan es correcto, pero para responder a su pregunta con citas, no se olvide de escapar algo que de otro modo romperlo, por lo que si usted tiene html("<a href='#' onclick='dofunction("text")'>...etc..."); Tiene que ser html("<a href='#' onclick='dofunction(\"text\")'>...etc..."); a fin de que las comillas dobles para no ser leído literalmente .

Answer 5

Si cotizaciones están rompiendo su código, probar este ...

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

Las citas no se escaparon. Simplemente agregue una barra invertida antes de cualquier comilla, doble o única dentro de su código HTML. Deberias hacer eso. ;)

Answer 6

Si se trata de avanzar por un enlace, es probable que desee hacerlo con AJAX:

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

Sin embargo, tener en cuenta si usted está tratando de tirar de HTML de una página web en una diferente dominio necesitarás usar proxies de servidor y todo eso ... algo fuera del alcance de la pregunta.

Answer 7

JavaScript no tiene un buen soporte para cadenas multilínea o sintaxis HEREDOC, pero hay algunas soluciones.

Añadir una barra invertida "\" al final de cada línea para permitir que el motor de scripts sabe va a proseguir en la línea siguiente sin terminar:

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

utilizar 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>