mejor manera de inyectar html usando javascript

Question

Espero que esto no sea demasiado subjetivo. Siento que hay una respuesta definitiva, así que aquí va.

quiero para crear esta html sobre la marcha utilizando JS (no hay bibliotecas):

<a href="#" id="playButton">Play</a> 
<a href="javascript: void(0)" id="muteUnmute">Mute</a> 
<div id="progressBarOuter"> 
    <div id="bytesLoaded"></div> 
    <div id="progressBar"></div> 
</div> 
<div id="currentTime">0:00</div> 
<div id="totalTime">0:00</div> 

usando javascript. Sé que puedo hacer esto usando createElement, etc. pero parece extremadamente largo de hacer esto para cada elemento. ¿Alguien puede sugerir una forma de hacerlo con más brevedad?

no tengo acceso a una biblioteca en este proyecto .... por lo que no jQuery etc.

Answer 1

Shove toda la cosa en una variable JS:

var html = '<a href="#" id="playButton">Play</a>'; 
html += '<a href="javascript: void(0)" id="muteUnmute">Mute</a>'; 
html += '<div id="progressBarOuter"><div id="bytesLoaded"></div><div id="progressBar"></div></div>'; 
html += '<div id="currentTime">0:00</div>'; 
html += '<div id="totalTime">0:00</div>'; 

continuación:

document.getElementById("parentElement").innerHTML = html; 

Si quieres, entonces:

document.getElementById("totalTime").innerHTML = "5:00"; 

Answer 2

Puede concatenar cadenas HTML puro (teniendo cuidado de escapar texto y evitar que los agujeros XSS), o se puede reescribir jQuery (o algo similar)

Answer 3

Si usted no necesita ninguna validación para su sintaxis (que es lo que hace tan agradable createElement()), entonces siempre se puede simplemente por defecto a establecer la propiedad innerHTML del elemento que desea insertar su margen de beneficio dentro de.

Personalmente, me quedaría con el uso de createElement(). Es más detallado, pero hay mucho menos cosas de qué preocuparse de esa manera.

Answer 4

Usted puede utilizar

<script type="text/javascript"> 
    function appendHTML() { 
     var wrapper = document.createElement("div"); 
     wrapper.innerHTML = '\ 
<a href="#" id="playButton">Play</a>\ 
<a href="javascript: void(0)" id="muteUnmute">Mute</a>\ 
<div id="progressBarOuter"> \ 
<div id="bytesLoaded"></div>\ 
    <div id="progressBar"></div>\ 
</div>\ 
<div id="currentTime">0:00</div>\ 
<div id="totalTime">0:00</div>\ 
'; 
     document.body.appendChild(wrapper); 
    } 
</script> 

Answer 5

Mantenga su margen de beneficio a parte de su código:

Puede incrustar los fragmentos de HTML que se va a utilizar como plantillas ocultas dentro de su página HTML y clonarlos en la demanda:

<style type="text/css"> 
#templates { display: none } 
</style> 
... 
<script type="text/javascript"> 
var node = document.getElementById("tmp_audio").cloneNode(true); 
node.id = ""; // Don't forget :) 
// modify node contents with DOM manipulation 
container.appendChild(node); 
</script> 
... 
<div id="templates"> 
    <div id="tmp_audio"> 
     <a href="#" class="playButton">Play</a> 
     <a href="#" class="muteUnmute">Mute</a> 
     <div class="progressBarOuter"> 
      <div class="bytesLoaded"></div> 
      <div class="progressBar"></div> 
     </div> 
     <div class="currentTime">0:00</div> 
     <div class="totalTime">0:00</div> 
    </div> 
</div> 

actualización : Tenga en cuenta que he convertido los atributos id en la plantilla a los atributos class. Esto es para evitar tener múltiples elementos en su página con los mismos identificadores. Probablemente ni siquiera necesites las clases. Se puede acceder a los elementos con:

node.getElementsByTagName("div")[4].innerHTML = 
    format(data.currentTime); 

Como alternativa, puede actuar en el código HTML de la plantilla:

<script type="text/javascript"> 
var tmp = document.getElementById("tmp_audio").innerHTML; 
// modify template HTML with token replacement 
container.innerHTML += tmp; 
</script> 

Answer 6

Si el rendimiento es una preocupación, se mantenga alejado de innerHTML. Debe crear todo el árbol de objetos utilizando document.createElement() tantas veces como sea necesario, incluso para elementos anidados.

Finalmente, agréguela al documento con una sola declaración, no muchas declaraciones.

En mis pruebas informales a lo largo de los años, esto le proporcionará el mejor rendimiento (algunos navegadores pueden diferir).

Si HTML alguna vez se declara en una variable, debería ser simple y para un propósito muy específico. Por lo general, este no es el enfoque correcto.

Answer 7

Tengo una situación en la que paso texto a una biblioteca de terceros, pero si mi modelo es Privado, me gustaría agregar un elemento al texto.

return { id: item.id, text: (item.isPrivate == true) ? "<i class=\"icon-lock\" title=\"Private group.\"></i> " + item.label : item.label }; 

Esto crea problemas con la forma en que la biblioteca externa construye su marcado.

Esto nunca es una buena idea, pero las bibliotecas de terceros están allí para que no tengamos que escribir todo nosotros mismos. En una situación como esta, debe confiar en pasar el marcado a través de javascript.

cuando encuentro una solución adecuada a este, que le dará una actualización

Answer 8

Ahora con Web Components se puede inyectar HTML usando una importación HTML.

La sintaxis es la siguiente:

<link rel="import" href="component.html" > 

Esto sólo tiene que cargar el contenido del archivo HTML en la línea href atributo en el orden en que aparece. Puede cualquier html válido en el archivo cargado, por lo que incluso puede cargar otros scripts si lo desea.

para inyectar que a partir de JavaScript se podría hacer algo de la talla de:

var importTag = document.createElement('link'); 
importTag.setAttribute('rel', 'import'); 
importTag.setAttribute('href', 'component.html'); 
document.body.appendChild(importTag); 

En el momento que estoy escribiendo esto, Chrome y Opera de apoyo importaciones HTML. Puede ver una tabla de compatibilidad actualizada aquí http://caniuse.com/#feat=imports

Pero no se preocupe porque los navegadores no la soportan, puede usarla de todos modos con el polifalo webcomponentsjs.

Para obtener más información sobre las importaciones HTML comprobar http://webcomponents.org/articles/introduction-to-html-imports/