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

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

$（“#searchListUl”）.append（“
”）；
$（“#searchListUl”）.listview（“刷新”）；

如果使用“dynamic”表示希望能够在不知道名称（“Apple”）的情况下附加列表项，则可以使用用于创建元素的jQuery函数创建一个通用函数：

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

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

函数添加（名称）{
var$li=$（“
”）attr（“数据过滤器文本”，名称）
.附于（“#searchListUI”）；
$（“”）attr（“href”，“#”）
.文本（名称）
.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>

添加（“苹果”）；
$（“#searchListUl”）.listview（“刷新”）；

您的函数类似于：

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

var addItem=函数（项）{
$（“#searchListUl”）.append（“
”）；
}

您可以通过以下方式调用它：

---

addItem（“apple”）

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

始终使用.text（）设置元素的文本。在jquery中，.text（）将在需要时正确地对字符进行HTMLEncode。如果您有SQL方面的经验，您可以像考虑conn.exec（$RANDOM\u STRING）一样考虑.append（$RANDOM\u STRING）。就其性质而言，它们很容易被注射，因此应不惜一切代价避免注射

---

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

您说的“在函数中”是什么意思？例如，函数addLi（）{return'

；}很好，但在我的HTML中谁调用addItem（“Apple”）？你能举个例子吗。当你需要它时：）例如：如果你有一个id为

myButton

，你会这样做：

$（“#myButton”）。在（“click”，function（）{addItem（“apple”）}

是的，我希望能够在不知道名称的情况下附加列表项。如何在我的html中调用此函数？@somehut:“调用html”没有多大意义-您可以在JavaScript中调用它，如

add（“Apple”）

，它将附加列表项。之后如何刷新我的列表？@somehut:我猜调用

$（“#searchListUl”）。listview（“刷新”）

After-首先追加列表项，然后刷新listview。在初始化之前，Uncaught不能调用listview上的方法；试图用$（“#searchListUl”）调用方法“refresh”。listview（“refresh”）；无论是否使用

append（）

，用户都可以通过控制台注入原始HTML。但是这不应该造成任何XSS危险漏洞，除非您将生成的html保存到数据库或类似的数据库中，这里的情况似乎不是这样。没有提到跨站点脚本。嘿@pierce，如果您想讨论另一个答案，通常最好在该答案上留下评论。