il modo migliore per iniettare html usando javascript

Question

Spero che questo non sia troppo soggettivo. Sento che c'è una risposta definitiva, quindi ecco qui.

voglio creare questa html al volo usando JS (nessun biblioteche):

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

utilizzando JavaScript. So che posso farlo usando createElement ecc, ma sembra estremamente prolisso per fare ciò per ogni elemento. Qualcuno può suggerire un modo per farlo con più brevità.

Non ho accesso a una libreria in questo progetto .... quindi non jquery ecc

Answer 1

spingere l'intera cosa in una variabile 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>'; 

Poi:

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

se si vuole allora:

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

Answer 2

È possibile concatenare le stringhe HTML prime (facendo attenzione a fuggire il testo ed evitare buchi XSS), oppure si può riscrivere jQuery (o qualcosa di simile)

Answer 3

Se non è necessaria alcuna convalida per la sintassi (che è ciò che rende createElement() così piacevole), è sempre possibile impostare semplicemente la proprietà innerHTML dell'elemento in cui si desidera inserire il markup all'interno.

Personalmente, vorrei attenermi all'utilizzo di createElement(). È più prolisso ma ci sono molte meno cose da preoccuparsi di questo modo.

Answer 4

È possibile utilizzare

<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

Tenere la marcatura separata dal codice:

È possibile incorporare i frammenti di codice HTML che ti verrà utilizzando i modelli come nascosti all'interno della vostra pagina HTML e clonare su richiesta:

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

Aggiornamento Nota che ho convertito gli attributi id nel modello negli attributi class. Questo per evitare di avere più elementi sulla tua pagina con gli stessi ID. Probabilmente non hai nemmeno bisogno delle lezioni. È possibile accedere agli elementi con:

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

In alternativa, si può agire sul codice HTML del modello:

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

Answer 6

Se le prestazioni sono un problema, stare lontano da innerHTML. È necessario creare l'intero albero degli oggetti usando document.createElement() tutte le volte necessarie, incluso per gli elementi nidificati.

Infine, aggiungilo al documento con una dichiarazione, non molte affermazioni.

Nei miei test informali nel corso degli anni, questo vi darà le migliori prestazioni (alcuni browser potrebbero differire).

Se HTML viene mai dichiarato in una variabile, dovrebbe essere semplice e per uno scopo molto specifico. Di solito, questo non è l'approccio giusto.

Answer 7

Ho una situazione in cui passo il testo in una libreria di terze parti, ma se il mio modello è Privato, vorrei aggiungere un elemento al testo.

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

Questo crea problemi con il modo in cui la libreria di terze parti crea il suo markup.

Questa non è mai una buona idea, ma le librerie di terze parti ci sono così che non dobbiamo scrivere tutto da soli. In una situazione come questa, devi fare affidamento sul passaggio del markup anche se javascript.

quando trovo una soluzione adeguata a questo, io vi darà un aggiornamento

Answer 8

Ora con Web Components è possibile iniettare codice HTML usando un import HTML.

La sintassi è simile al seguente:

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

Questo sarà solo caricare il contenuto del file HTML nella linea di attributo href nell'ordine in cui appare. È possibile qualsiasi codice HTML valido nel file caricato, in modo da poter caricare anche altri script, se lo si desidera.

per iniettare che da JavaScript si potrebbe fare qualcosa del calibro di:

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

Al momento sto scrivendo questo, Chrome e Opera di supporto importazioni HTML. Puoi vedere una tabella di compatibilità aggiornata qui http://caniuse.com/#feat=imports

Ma non preoccuparti che i browser non lo supportino, puoi comunque utilizzarlo comunque con il polyfill webcomponentsjs.

Per ulteriori informazioni su importazioni HTML controllare http://webcomponents.org/articles/introduction-to-html-imports/