建議使用不同元素動態生成html的方法

我想動態生成一些元素（事先不知道多少）並將它們粘合在一起，並基本上擴展一個div，比如id爲「myDiv」。出於演示目的，假設客戶端收到一條消息，通過擴展div來即時生成三個按鈕列表。建議使用不同元素動態生成html的方法

我堅持，雖然，因爲我生成列表這樣

然後才能追加做

document.getElementById('myDiv').innerHTML = html;

，爲了生成每個按鈕我最初的意圖是再do this每個按鈕都是在while循環中動態生成的適當的div。但這個東西不行。對於像我這樣的新手來說，這裏可能有幾件事情。

是否有一個JavaScript示例，我可以在for循環中使用，以便動態生成按鈕，給他們我想要的id並委託他們？
我應該將第一部分從Javascript轉換爲jQuery，然後使用jQuery同時執行這兩件事情？如何（在這個例子中）？
這些東西有沒有很好的參考？

預先感謝您的寶貴時間。我不希望所有三個問題的答案，但我想就如何實現這個小目標作爲如何繼續我的工作的指導方針的答案。

來源

2013-09-30 MightyMouse

使用jquery將永遠更好 –

謝謝。但是，如何在jQuery中完成這麼簡單的事情呢？ – MightyMouse

網上有很多例子，在這裏有很多問題在stackoverflow。開始的好地方將是 http://api.jquery.com/ –

那麼，我可以引用你的模板庫插件。

但我敢肯定，它可以用代碼AA幾行（窮人的模板引擎（克羅克福德）來完成：

if (!String.prototype.supplant) { 
    String.prototype.supplant = function (o) { 
     return this.replace(/{([^{}]*)}/g, 
      function (a, b) { 
       var r = o[b]; 
       return typeof r === 'string' || typeof r === 'number' ? r : a; 
      } 
     ); 
    }; 
}

那麼它是如何工作的：

這將是您的結構：（從技術上講，你可以（也應該）把它放在文本/模板部分）

var t= '<tr data-symbol="{Symbol}"><td>{Symbol}</td><td>{Price}</td><td>{DayOpen}</td></tr>';

這是結合部分：

t.supplant({Symbol:'s',Price:2,DayOpen:3})

live example

來源

2013-09-30 13:09:45

這是它是如何使用jQuery

var $ul = $('<ul></ul>'); 
for (i = 0; i < someTimes; i++) { 
    $ul.appent("<li>some text <div id='button" + i + "'></div></li>"); 
} 
$('#myDiv').append($ul);

來源

2013-09-30 13:14:45

對於像我這樣的初學者，我真的很喜歡這種方法，但是在你的代碼之後，我想寫下另一個循環，在那裏生成實際的按鈕並將它附加到循環所生成的div上。所以，我動態生成按鈕（每次迭代都是這樣的：http://stackoverflow.com/questions/19072478/dynamic-buttons-with-attributes-through-jquery#19072533），然後生成一個var tempID ='＃按鈕'+ i;然後（每次迭代結束）我正在做$（tempID）.append（$ aButton）;但是這不起作用。 – MightyMouse

你應該發佈你的代碼，或者甚至更好地製作小提琴（http://jsfiddle.net/），因爲一般來說，你提出的解決方案應該可以工作 –

做，你可以在JQuery使用appendTo。語法是：

$(content).appendTo(selector)

jQuery的文檔頁面上的例子是：

<h2>Greetings</h2> 
<div class="container"> 
    <div class="inner">Hello</div> 
    <div class="inner">Goodbye</div> 
</div> 

$("<p>Test</p>").appendTo(".inner");

編輯：基於評論..

<div class="placeholder"></div> 

$("your generated html").appendTo($(".placeholder"));

來源

2013-09-30 13:18:33 christiandev

我想說的是，「inner」類的div會去在飛行中生成。所以，不，這不適合我。這是我的想法：用div生成html說，然後使用document.getElementById（'container'）。innerHTML = html;之後，當divs準備就緒時，我會追加到「內部」。說得通？ – MightyMouse

建議使用不同元素動態生成html的方法

回答

相關問題