Javascript 可重用性：如何在网页的不同位置使用相同的列表项

我想在一个主页和两个不同的对话框中使用一组100个列表项。我想，编写相同的代码集是愚蠢的。因此，如何在网页中的3个不同位置使用相同的集合呢？我将使用jQuery（或其他一些客户端库）克隆项目，并将它们附加到每个

标记中。如果您需要帮助，请告诉我。

您可以使用此代码片段克隆HTML

  <script>
      (function(){
        $(document).ready(function(){

            $("#listA").clone().appendTo("#dialogueBox1");
            $("#listA").clone().appendTo("#dialogueBox2");

         })
       })();
   </script>

（功能（）{
$（文档）.ready（函数（）{
$（“#listA”）.clone（）.appendTo（“#dialogueBox1”）；
$（“#listA”）.clone（）.appendTo（“#dialogueBox2”）；
})
})();

---

其中listA是“ul”或“ol”元素的id。

如果您想要纯HTML5解决方案，这可能很有趣。。。使用

datalist

元素-对此的支持（目前）将非常有限，但是：

（来源于上面的链接）

---

我会将列表存储在一个json文件中：list.json

{
  list: [element0, element1, ..., element99]
}

然后使用jQuery通过ajax检索元素，例如：

/**
 * Replaces the element's content with the list of items.
 */
function setList(element) {
  $.getJson(listJsonURL, function (data) {
    var list = "<ul>";
    for (var i = 0, len = data.list.length; i<len; i++) {
      list += "\n  <li>" + data.list[i] + "</li>";
    }
    list += "\n</ul>";
    $(element).html(list);
  });
}

/**
*用项目列表替换元素的内容。
*/
函数集合列表（元素）{
$.getJson（listJsonURL，函数（数据）{
var list=“
”；
对于（var i=0，len=data.list.length；i
/**
 * Replaces the element's content with the list of items.
 */
function setList(element) {
  $.getJson(listJsonURL, function (data) {
    var list = "<ul>";
    for (var i = 0, len = data.list.length; i<len; i++) {
      list += "\n  <li>" + data.list[i] + "</li>";
    }
    list += "\n</ul>";
    $(element).html(list);
  });
}