我希望這不是太主觀。我覺得這裏有一個明確的答案。使用javascript注入html的最佳方法
我想使用JS動態創建這個網站（無庫）：
<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>
使用JavaScript。我知道我可以使用createElement等來做到這一點，但對於每個元素來說，這似乎非常冗長。任何人都可以提出一個更簡潔的方法來做到這一點。
我沒有使用圖書館在這個項目....所以沒有的jQuery等
肖夫整個事情到一個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>';
然後：
document.getElementById("parentElement").innerHTML = html;
，如果你想，那麼：
document.getElementById("totalTime").innerHTML = "5:00";
混合代碼與標記 - > :( – 2010-09-21 16:36:26
這不是最好的解決方案，但給出了什麼條件，這是可以接受的。 – 2010-09-21 16:40:18
我想我會去用這個。 – 2010-09-21 17:10:24
，可以串聯原始的HTML字符串（小心逃脫文字和防止XSS漏洞），或者你可以重寫jQuery（或類似的東西）
這是爲什麼downvoted？ – SLaks 2010-09-21 16:46:57
如果你不需要任何驗證你的語法（這是什麼使得createElement()這麼好），那麼你總是可以默認設置你想插入標記的元素的innerHTML屬性代替。
個人而言，我會堅持使用createElement()。它比較冗長，但有很少的事情需要擔心這種方式。
您可以使用
<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>
保持你的標記從你的代碼分離：
您可以嵌入您將使用您的HTML頁面內爲隱藏模板的HTML片段，並克隆它們的需求：
<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>
更新：請注意，我已將模板中的id屬性轉換爲class屬性。這是爲了避免頁面上的多個元素具有相同的ID。你可能甚至不需要這些類。您可以通過訪問元素：
node.getElementsByTagName("div")[4].innerHTML =
format(data.currentTime);
或者，您可以在模板的HTML行爲：
<script type="text/javascript">
var tmp = document.getElementById("tmp_audio").innerHTML;
// modify template HTML with token replacement
container.innerHTML += tmp;
</script>
這樣做會創建多個具有相同ID的元素， – 2010-09-21 16:42:32
@Ryan Ternier：No ，它不會，請注意'node.id =「」;'行 – 2010-09-21 16:54:30
@Ryan Ternier：啊，我明白了，你不是在談論模板的id，而是在其中的id。 t就是我複製粘貼OP的模板。通常情況下，您不會在模板中使用ID。我會編輯我的答案。 – 2010-09-21 17:09:29
如果性能是一個問題，從innerHTML的遠離。您應該根據需要多次使用document.createElement()創建整個對象樹，包括嵌套元素。
最後，用一條語句將其追加到文檔中，語句不多。
在我多年來的非正式測試中，這會給你最好的性能（有些瀏覽器可能會有所不同）。
如果HTML是在變量中聲明的，它應該很簡單並且用於特定的目的。通常情況下，這不是正確的方法。
我有一種情況，我將文本傳遞到第三方庫，但如果我的模型是private，我想在文本中添加一個元素。
return { id: item.id, text: (item.isPrivate == true) ? "<i class=\"icon-lock\" title=\"Private group.\"></i> " + item.label : item.label };
這會引起第三方庫建立標記的問題。
這絕不是一個好主意，但第三方庫在那裏，所以我們不必自己寫一切。在這樣的情況下，你必須依靠JavaScript傳遞標記。
當我找到這個妥善的解決辦法，我會給你一個更新
Web Components
現在你可以使用HTML 進口注入HTML。
的語法如下：
<link rel="import" href="component.html" >
這隻會加載HTML文件中出現的順序href屬性內嵌的內容。您可以在加載的文件中使用任何有效的html，這樣您甚至可以根據需要加載其他腳本。
來注入JavaScript中，你可以做喜歡的事：
var importTag = document.createElement('link');
importTag.setAttribute('rel', 'import');
importTag.setAttribute('href', 'component.html');
document.body.appendChild(importTag);
當時我寫這個，Chrome和Opera支持HTML進口。你可以在這裏看到一個最新的兼容性表格http://caniuse.com/#feat=imports
但是不要擔心瀏覽器不支持它，你可以在webcomponentsjs填充中使用它。
有關HTML進口更多信息檢查http://webcomponents.org/articles/introduction-to-html-imports/
「我知道我可以使用的createElement等做到這一點，但它似乎非常長篇大論來爲每個元素做」 - 是啊。當你有重複的，冗長的編程任務時，你可以通過封裝冗長的函數來實現自動化。當你經常使用那些功能中的一些功能時，你可以將它們粘在一起，然後繁榮起來：你有一個圖書館！所以，我認爲應該開始寫自己的圖書館。 – 2010-09-21 16:34:17