如何動態添加 <li> jquery列表中的標簽？

Question

目前我可以使用腳本將li標簽添加到我的列表中。 但是如何在.js中的函數中動態添加li標簽？ 希望我能看到一個很好的例子。 以下是我的代碼。 謝謝！

<div data-role="page" id="searchPage" data-theme="b">
<div data-role="content">
    <ul data-role="listview" data-filter="true" data-theme="b" id="searchListUl">
    </ul>
</div>
<script type="text/javascript">
  $("#searchListUl").append('<li data-filtertext="Apple"><a href="#">Apple</a></li>');
  $("#searchListUl").listview('refresh');</script></div>

Answer 1

你的功能將是這樣的：

var addItem = function(item){
    $("#searchListUl").append('<li data-filtertext="'+item+'"><a href="#">'+item+'</a></li>');
}

您可以使用以下命令調用它： addItem("apple")

Answer 2

如果您使用“動態”意味着您希望能夠在不知道名稱（“Apple”）的情況下附加列表項，則可以使用用於創建元素的jQuery函數創建泛型函數：

function add(name) {
    var $li = $("<li>").attr("data-filtertext", name)
                       .appendTo("#searchListUI");

    $("<a>").attr("href", "#")
            .text(name)
            .appendTo($li);
}

---

您可以按如下方式使用它：

<div data-role="page" id="searchPage" data-theme="b">
<div data-role="content">
    <ul data-role="listview" data-filter="true" data-theme="b" id="searchListUl">
    </ul>
</div>
<script type="text/javascript">
  add("Apple");
  $("#searchListUl").listview('refresh');</script></div>

Answer 3

應該注意的是，以許多這些答案中描述的方式使用.append（）將直接容易受到跨站點腳本（XSS）攻擊。 如果從可能受用戶影響的數據源中提取字符串，則用戶可以放置原始HTML，並且當調用.append（）時，原始HTML將直接注入DOM。 腳本標簽特別危險。 一旦你可以在某個人的會話中運行任意的javascript，攻擊者就可以在某些情況下獲取他們的cookie，他們的私人信息甚至密碼，所有這些都沒有受害者知道。

始終始終使用.text（）來設置元素的文本。 在jquery中，.text（）會在需要時正確HTMLEncode字符。 如果你有使用SQL的經驗，你可以想象.append（$ RANDOM_STRING）與你想到的conn.exec（$ RANDOM_STRING）相同。 就其性質而言，它們易於注射，應不惜一切代價避免使用。

我確信這些示例中的代碼已經被復制和粘貼，現在正在互聯網上使用，這很糟糕。 請說出來，.append（）將附加HTML，而不僅僅是文本，因此不當使用會讓攻擊者將原始HTML注入您的DOM。