Cómo almacenar un fragmento de HTML e insertarlo más adelante en el documento?

¿Hay alguna forma de almacenar un fragmento HTML en una variable usando Javascript o jQuery de esta manera? (Obviamente, es un no-trabajo un ejemplo)Cómo almacenar un fragmento de HTML e insertarlo más adelante en el documento?

var mysnippet = << EOF 
<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div> 
EOF

Y luego insertarlo en el documento usando jQuery:

mysnippet.append($('#someelement'));

EDIT:

Por favor, esto antes de responder de Comentando: Lo que tengo es un fragmento de HTML sin formato dentro de mi archivo JS, y necesito almacenarlo en una variable de Javascript usando algo como th en la construcción de EOF. Necesito evitar ponerlo entre comillas.

Si no es posible usar Javascript y/o jQuery, la pregunta no tiene solución.

Fuente

2012-02-09 David Morales

$ (mysnippet) .append (#someelement) – ZiTAL

Dado que ningún editor de archivos razonable o linter destacaría correctamente su archivo js, estoy seguro de que es ** siempre mejor ** para poner el HTML en un archivo '.html' separado, y luego leerlo con' $ .get ("mysnippet.html") '. Luego tiene la flexibilidad de editar el DOM del nuevo objeto antes de agregarlo Además, el HTML y JS se pueden filtrar fácilmente. También separa los datos del código, lo que siempre es bueno para el futuro. –

usted podría utilizar las plantillas de javascript como ejs, haml-coffee, ...

Fuente

2012-02-09 12:41:35 iblue

Estoy marcando su respuesta como la válida, ya que parece b e la única manera de hacer lo que necesito. Usando erb por ejemplo (lenguaje de plantillas Rails) puedo renderizar un código de fragmento de HTML externo y escaparlo con un ayudante de Rails, así puedo finalmente almacenarlo en una variable para anexarlo al documento. –

¡Simplemente obtenga el código HTML del div que desea por var content = $('#somediv').html(); y luego añádalo a algún div más adelante! $('#otherdiv').append(content);

$().html(); entrega el contenido HTML de ese div. documentación: http://api.jquery.com/html/

$().append(<content>); agrega el contenido a una división especial. documentatoin: http://api.jquery.com/append/

Fuente

2012-02-09 12:39:28

El código HTML que deseo adjuntar debe estar en el formato que he anotado en mi pregunta. Todavía no existe en el documento. –

bien, simplemente use simplemente el método .append() –

Sí. Fiddle example

JavaScript

var html = '<b>Bold</b>' 
$('.anotherclass').append(html);

HTML

<div class="myclass"> 
    <div class="anotherclass"> 
    Some dummy text 
    </div> 
</div>

Fuente

2012-02-09 12:41:36 Farmor

Se puede escribir:

var mysnippet = "<div class='myclass'>"+ 
    "<div class='anotherclass'>"+ 
    "Some dummy text"+ 
    "</div>"+ 
"</div>";

y luego inserto está utilizando la función append (que toma como argumento el fragmento).

Fuente

2012-02-09 12:42:49

Desafortunadamente no hay nada como << EOF disponible. Aquí hay una solución:

$el = $('<div />') 
    .addClass('myClass') 
    .append(
    $('<div />') 
     .addClass('anotherclass') 
     .text('Foo Bar') 
);

Fuente

2012-02-09 12:44:04 osahyoun

Pensando en el mismo problema, he encontrado esta discusión. Lo que tengo en mente es poner un textarea oculto, que contiene el html, y luego recuperar el html desde allí.

Por lo tanto, no habrá conflictos con los identificadores DOM duplicados, ya que el contenido textarea no se representa como html.

Fuente

2012-10-31 02:26:32 Serge

para aquellos que vienen a través de este como lo he hecho ... Es posible que desee utilizar la nueva etiqueta <template> en HTML5. Todavía no almacena el HTML en JavaScript desafortunadamente :(

Fuente

2014-03-29 05:09:39 thehappycheese

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template – Sean

Cómo almacenar un fragmento de HTML e insertarlo más adelante en el documento?

Respuesta

Cuestiones relacionadas