jquery追加用法，而不生成字符串中的HTML

我想建立一些使用jQuery append（...）的列表元素，但我似乎沒有得到正確的語法。我有一部分來自（有正確的輸出），但我相信有更好的方法來使用不需要直接從字符串構建HTML的函數。jquery追加用法，而不生成字符串中的HTML

我想要的結果......

<a href='...;'> 
    <div>Wigan</div> 
    <div style="font-size: 8px">Wigan, null, NaN</div> 
</a>

我的JavaScript ...

var result = $("<a>", {href: "..."}); 
result.append("<div>"+ results[index].Region + "</div>"); 
result.append("<div style = \" font-size: 8px\">" + results[index].District + ", " + results[index].Postcode + ", " + +results[index].CountryCode + "</div>");

我有上述作品什麼，但我怎麼組追加調用和內容構建這件事而不是像上面那樣簡單地創建字符串？

謝謝。

來源

2015-05-06 Martin Robins

有你看着像[鬍子]（http://mustache.github.io/）到模板像這樣重複的元素？ –

@BrianMuenzenmeyer：不，到現在爲止我從來沒有聽說過它。如果可能的話，我寧願避免在這個時候添加新的框架，儘管我知道我可以通過jQuery實現我所需要的，即使我按照上面所示的方式來完成。不過謝謝。 –

可以理解。模板框架給了你很大的權力 - 但TrueBlueAussie下面描述的將在一個綁定:) –

喜歡的東西：

result.append($('<div>').html(results[index].Region), $('<div>',{ style:' ...' }));

或

$('<div>').html(results[index].Region).appendTo(result)

來源

2015-05-06 15:17:53 gin93r

如果你不想使用模板插件（如鬍子）這裏是一個簡單的一招：

把你的模板，在一個虛擬的腳本塊有一個未知類型

<script type="text/template" id="template"> 
     <a href='...;'><div>{{name}}</div><div style="font-size: 8px">{{name}}{{someother}}</div></a> 
</script>

和使用如果它是一個純HTML字符串。使用替換來將您的值插入任何佔位符：

var html = $('#template').html().replace(/{{name}}/g, myname).replace(/{{someother}}/g, someother)

結果準備好將追加/插入等到DOM中。

注：

我使用的鬍子樣式的標記在這個例子中，但獨特的東西會做匹配。
這使編輯您的模板所見即所得/明顯，維護更容易。

來源

2015-05-06 15:15:08

我喜歡你在那裏做了什麼，但爲了與應用程序目前建立的方式保持一致，我使用了@Veo的解決方案。謝謝。 –

@Martin Robins：你的電話。你問了一個*更好的方法（有幾個）:) –

是的，這是這類問題的問題。許多方法去皮膚貓，它歸結爲個人的品味。 – gin93r

jquery追加用法，而不生成字符串中的HTML

回答

相關問題