如何动态添加<李>jquery列表中的标记

How to add dynamically <li> tags in jquery list?

本文关键字：jquery gt 列表 lt 何动态 动态 添加      更新时间：2023-09-26

现在我可以用脚本将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>

您的函数类似于：

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

您可以用以下方式进行调用：addItem("apple")

如果您使用"dynamic"意味着您希望能够在不知道名称的情况下附加列表项（"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>

需要注意的是，以其中许多答案中描述的方式使用.append（）将直接受到跨站点脚本（XSS）攻击。如果字符串是从可能受到用户影响的数据源中提取的，那么用户可以放入原始HTML，当调用.append（）时，原始HTML将直接注入DOM。脚本标记尤其危险。一旦你可以在某人会话中运行任意javascript，攻击者就可以在受害者不知情的情况下获取他们的cookie、私人信息，甚至密码。

始终使用.text（）设置元素的文本。在jquery中，.text（）会在需要时正确地对字符进行HTMLEncode编码。如果你有SQL的经验，你可以像考虑conn.exec（$RANDOM_STRING）一样考虑.append（$RANDOM_STRING）。从本质上讲，它们很容易被注入，应该不惜一切代价避免。

我确信这些例子中的代码已经被复制粘贴，现在在互联网上都在使用，这太糟糕了。请把这个词说出来，.append（）会附加HTML，而不仅仅是文本，所以不正确的使用会让攻击者将原始HTML注入到您的DOM中。

相关文章：