Как динамически добавлять теги <li>в список jquery? - PullRequest
Новая
       0

Как динамически добавлять теги <li>в список jquery?

5 голосов
/ 14 февраля 2012

В данный момент я могу добавить теги li в свой список с помощью скрипта.Но как я могу динамически добавлять теги li в функцию в .js?Надеюсь, я увижу хороший пример.Ниже мой код.Спасибо! 

<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>

Ответы [ 3 ]

13 голосов
/ 14 февраля 2012

Ваша функция будет выглядеть примерно так: 

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

Вы можете позвонить с помощью: addItem("apple")

0 голосов
/ 13 июля 2013

Следует отметить, что использование .append () способом, описанным во многих из этих ответов, будет напрямую уязвимо для атак межсайтового скриптинга (XSS). Если строки извлекаются из источника данных, на который могут влиять пользователи, пользователь может поместить необработанный HTML, а когда вызывается .append (), необработанный HTML будет напрямую введен в DOM. Теги скрипта особенно опасны. После того, как вы можете запустить произвольный javascript во время чьего-либо сеанса, злоумышленник может получить свои куки, личную информацию и даже пароли при некоторых обстоятельствах, и все это без ведома жертвы.

Всегда ВСЕГДА используйте .text (), чтобы установить текст элемента. В jquery .text () будет правильно HTMLEncode символов, когда это необходимо. Если у вас есть опыт работы с SQL, вы можете думать о .append ($ RANDOM_STRING) так же, как о conn.exec ($ RANDOM_STRING). По своей природе они уязвимы для инъекций, и их следует избегать любой ценой.

Я уверен, что код из этих примеров уже скопирован и вставлен, и теперь используется по всему Интернету, и это отстой. Выведите слово, .append () добавит HTML, а не просто текст, поэтому неправильное использование позволит злоумышленникам внедрить необработанный HTML в вашу DOM.

0 голосов
/ 14 февраля 2012

Если вы с «динамическим» имеете в виду, что вы хотите иметь возможность добавлять элементы списка, не зная имени («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>
...