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。

如何在jquery列表中动态添加<li>标签？</li>

3 个答案: