JQuery - Правильный способ добавления дочернего элемента?

Это мой первый день jQuery, так что несите меня. В настоящее время я добавляю элемент в родительский контейнер, выполняя следующие действия:

var uploadedContainer =$('#uploadedimages');
var uploadedItem = '<div><span>'+file.name
                 + '</span><span><a class="mylink" href=remove.aspx?img='
                 + safeUrl+'>Remove</a></span></div>';
uploadedContainer.append(uploadedItem);

Пока он работает, я не уверен, что это правильный способ выполнить эту задачу. Кроме того, можно ли добавить элемент в родительский элемент и затушить дочерний элемент? Пример использования будет отличным!

Ответ 1

Если вы собираетесь добавлять похожие элементы снова и снова, я бы не использовал длинные строки в вашем коде. Это боль для поддержания и создания трудночитаемого кода. Вместо этого я рекомендовал бы использовать инструмент шаблонов, например Handlebars:

<script type="text/x-handlebars-template" id="tmpl">
    <div>
        <span>{{filename}}</span>
        <span><a href="remove.aspx?image={{safeUrl}}">Remove</a></span>
    </div>
</script>

Теперь мы строим скомпилированный шаблон из вышеперечисленного:

var template = Handlebars.compile( $("#tmpl").html() );

Все, что осталось сейчас, - это вызвать функцию template с нашим объектом данных, добавить полученную разметку в наш контейнер (или тело) и потушить ее.

var data = { 
    filename: "foo.png", 
    safeUrl: encodeURIComponent("foo image")
};

$("body").append(template(data)).fadeIn();

Результат - более чистый, четкий код, который будет иметь смысл и будет легко поддерживать.

Демо онлайн: http://plnkr.co/edit/7JVa2w6zOXdITlSfOOAv?p=preview

Ответ 2

var uploadedItem = '<div><span>'+file.name+'</span><span><a class="mylink" href=remove.aspx?img='+safeUrl+'>Remove</a></span></div>';

Вам следует избегать строповки HTML вместе со строками вроде этого. Что делать, если file.name или safeUrl имеет символ < или &? В лучшем случае вы создаете недопустимый HTML, в худшем случае вы только что оставили в своем приложении уязвимость в области межсайтового скриптинга.

Кроме того, нет encodeURIComponent кодировки на safeUrl (если вы не сделали это уже). Это необходимо сделать и для надежности. Есть также много символов, которые могут сломаться с safeUrl из-за отсутствия кавычек в атрибуте href.

Лучше: используйте метод text() для установки текстового содержимого элемента и attr(), чтобы установить атрибут в значение. Тогда вам не нужно беспокоиться об экранировании HTML. например:.

var div= $('<div><span></span><span><a class="mylink">Remove</a></div>');
div.find('span').eq(0).text(file.name);
div.find('span').eq(1).attr('href', 'remove.aspx?img='+encodeURIComponent(url));
div.appendTo('#uploadedimages');

Ответ 3

Этот код должен работать. Вы можете добавить этот код, чтобы угаснуть что-то в:

  $('#uploadedimages').fadeIn('slow', function() {
    // Animation complete
  });

Вам нужно настроить видимость загруженных изображений для скрытия, чтобы это работало.

Документация JQuery очень хорошая. Я предлагаю посетить сайт JQuery.

Ниже приведена ссылка относительно того, что вы что-то угадали.