JavaScript：我應該如何生成大量的HTML？

可能重複：
Is there a best practice for generating html with javascript JavaScript：我應該如何生成大量的HTML？

我要生成的JavaScript網站的大部分地區。

直截了當的辦法是形成一個包含所有HTML一個大字符串：

'<div>' 
    + '<span>some text</span>' 
    + '<form>' 
     + '<input type="text" />' 
...

不過這樣會很煩人的當一個人有寫幾百行的這種風格。並且當這樣的代碼稍後需要改變時會很痛苦...

你能想到一個更簡單的方法嗎？

來源

2011-07-22 Christoph Wurm

使用jQuery，您可以通過在對象中提供數據而不是一個大字符串，以更「有組織」的方式執行此操作。儘管我猜測它會變慢。 – pimvdb

創建片段爲模板，把它們變成一種無形的<div>：

<div style="display: none"> 
    <div id="template1"> 
     <h2 class="header_identifyingClass">Hello from template</h2> 
    </div> 
    <div id="template2"> 
     <span class="content">Blah blah</span> 
    </div> 
</div>

然後找到它，

document.getElementById("template1");

填補它的內在價值，例如通過XPath或jQuery查找內部元素並填充它們，例如使用element.innerHTML = "Hello from new value"，並將其移動或複製到DOM的可見部分。

創建多個模板並複製多次以生成許多模板。不要忘記更改副本的ID以保持其正常工作。

PS：我想我在JUnitDiff項目的代碼中使用了這種方法。但它被埋在XSLT中，它有其他目的。

來源

2011-07-22 11:48:45

打敗我吧。這是我首選的方法。如果做得正確，這比在JavaScript中構建/連接HTML字符串更可維護。 – aroth

@Ondra：Děkujimockrát:-) –

@Legate Neni zac :) –

使用JavaScript的方言，如CoffeeScript。它有here文檔：

''' 
    <div> 
    <span>some text</span> 
    <form> 
     <input type="text" /> 
'''

如果你需要在一個偶然的表達扔，你可以使用插值：

""" 
    <title>#{title}</title> 
"""

來源

2011-07-22 11:53:35 ngn

如果它是你只是增加了頁面上的JavaScript事件靜態內容，你可以考慮簡單地在你的主HTML頁面中使用它，但是使用display:none;。

然後，它只是一個改變它的風格，使其出現在頁面上的情況。更容易。

即使它是動態的，您也可以使用這種技術：將HTML內容隱藏在您的頁面中，並在顯示動態位之前填充動態位。

希望有幫助。

來源

2011-07-22 11:53:45 Spudley

到目前爲止，最好的方法是使用某種JavaScript模板系統。這比用CSS隱藏HTML更好的原因是，如果（例如）有人禁用CSS，他們將能夠看到你的模板，這顯然不是理想的。

使用模板系統，您可以將模板放在<script>標記中，這意味着它們完全隱藏在JavaScript以外的所有內容中。

我最喜歡的是jQuery模板系統，主要是因爲jQuery如今無處不在。你可以從這裏得到它：http://api.jquery.com/category/plugins/templates/

一個例子（從jQuery文檔拍攝）：

<ul id="movieList"></ul> 

<!-- the template is in this script tag -->  
<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    <li><b>${Name}</b> (${ReleaseYear})</li> 
</script> 

<!-- this script will fill out the template with the values you assign -->  
<script type="text/javascript"> 
    var movies = [ 
     { Name: "The Red Violin", ReleaseYear: "1998" }, 
     { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, 
     { Name: "The Inheritance", ReleaseYear: "1976" } 
    ]; 

    // Render the template with the movies data and insert 
    // the rendered HTML under the "movieList" element 
    $("#movieTemplate").tmpl(movies) 
     .appendTo("#movieList"); 
</script>

這是一個簡單的例子，但你可以把所有的HTML，你想在生成（使用相同的HTML代碼片段進行各種工作，只填寫空白處），甚至使用許多模板來構建更大的HTML代碼片段。

來源

2011-07-22 17:15:57 iblamefish

JavaScript：我應該如何生成大量的HTML？

回答

相關問題