najlepszy sposób wstrzykiwania html przy użyciu javascript

Question

Mam nadzieję, że nie jest to zbyt subiektywne. Czuję, że istnieje ostateczna odpowiedź, więc oto.

Chcę utworzyć ten kod HTML na bieżąco za pomocą JS (brak biblioteki):

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

przy użyciu javascript. Wiem, że mogę to zrobić za pomocą metody createElement itp., Ale wydaje się to bardzo długie, aby zrobić to dla każdego elementu. Czy ktoś może zaproponować sposób to zrobić z większą zwięzłością.

nie mam dostępu do biblioteki w tym projekcie .... więc nie jquery itp

Answer 1

Shove całą rzecz do zmiennej 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>'; 

wówczas:

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

jeśli chcesz potem:

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

Answer 2

można złączyć surowe ciągi HTML (uważając, aby uciec tekst i zapobiec XSS otwory) lub można przepisać jQuery (lub coś podobnego)

Answer 3

Jeśli nie potrzebujesz żadnego sprawdzania poprawności dla składni (co czyni createElement() tak miłym), to zawsze możesz ustawić domyślną wartość właściwości elementu, który chcesz wstawić do znaczników. wnętrze.

Osobiście pozostawałbym przy użyciu createElement(). Jest bardziej gadatliwy, ale o wiele mniej martwi się w ten sposób.

Answer 4

Można użyć

<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

Zachowaj znaczników oddzielone od kodu:

można umieścić fragmenty HTML, które będziesz używać jako szablony ukryte wewnątrz strony HTML i klonowania je na żądanie:

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

aktualizacji : Zwróć uwagę, że przekonwertowałem atrybuty id w szablonie na atrybuty class. Ma to na celu uniknięcie wielu elementów na stronie z tymi samymi identyfikatorami. Prawdopodobnie nie potrzebujesz nawet zajęć. Możesz uzyskać dostęp do elementów z:

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

Alternatywnie, można działać na HTML szablonu:

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

Answer 6

Jeśli wydajność jest problemem, z dala od innerHTML. Powinieneś utworzyć całe drzewo obiektów przy użyciu document.createElement() tyle razy, ile potrzeba, łącznie z elementami zagnieżdżonymi.

Wreszcie, dołącz to do dokumentu za pomocą jednego zdania, a nie wielu oświadczeń.

Podczas moich nieformalnych testów przez lata zapewni to najlepszą wydajność (niektóre przeglądarki mogą się różnić).

Jeśli HTML jest kiedykolwiek zadeklarowany w zmiennej, powinien być prosty i bardzo konkretny. Zwykle nie jest to właściwe podejście.

Answer 7

Mam sytuację, w której przekazuję tekst do biblioteki strony trzeciej, ale jeśli mój model jest prywatny, chciałbym dodać element do tekstu.

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

Powoduje to problemy ze sposobem, w jaki biblioteka stron trzecich tworzy jej znaczniki.

To nigdy nie jest dobry pomysł, ale biblioteki stron trzecich są tam, abyśmy nie musieli pisać wszystkiego sami. W takiej sytuacji musisz polegać na przekazywaniu znaczników przez javascript.

Kiedy znaleźć odpowiednie rozwiązanie do tego, dam ci aktualizacji

Answer 8

Teraz Web Components można wstrzyknąć HTML przy użyciu importu HTML.

Składnia wygląda następująco:

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

To będzie po prostu załadować zawartość pliku html w inline atrybutu href w kolejności to się pojawi. Możesz załadować dowolny poprawny html w załadowanym pliku, dzięki czemu możesz załadować inne skrypty, jeśli chcesz.

Aby wstrzyknąć które z JavaScript można zrobić coś pokroju:

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

W czasie piszę to import HTML wsparcia Chrome i Opera. Możesz zobaczyć aktualną tabelę kompatybilności tutaj http://caniuse.com/#feat=imports

Ale nie przejmuj się przeglądarkami, które jej nie obsługują, możesz z nich korzystać w każdym razie z polyfillem webcomponentsjs.

Aby uzyskać więcej informacji na temat importu HTML sprawdzić http://webcomponents.org/articles/introduction-to-html-imports/