Создание вложенных элементов в jquery

Question

Я пытаюсь заменить div созданными элементами, исходя из:

<div id='links'></div>

до

<div id='links'>
<ul>
<li><a href='#'>No</a></li>
</li>
</div>

Я хочу прикрепить функцию к ссылке в элементе <a>, который я создаю. Создание нужной ссылки работает, но обертывание ссылки в элемент <li> и элемент <ul> с использованием функции переноса не работает:

var no = $('<a>').attr({
    href: '#'
  }).click(function () {
    alert('clicked no');
    return false;
  }).text('no');

Работает, но no.wrap('<li></li>'); все еще просто дает мне развернутый <a> элемент. Я также пробовал $('#links').append('<ul>').append('<li>').append(no), но это тоже не работает.

Есть ли лучший способ сделать это?

Answer 1

<script type="text/javascript">
$(function(){

    var list = $("<ul />");

    var no = $('<a />')
        .attr({ href: '#' })
        .click(function () {
            alert('clicked no');
            return false;
        })
        .text('no')
        .wrap("<li />")
            .parent()
            .appendTo(list);

    list.appendTo("#links");
});    
</script>

Answer 2

no.wrap('<li></li>') по-прежнему возвращает элемент <a>, но добавляет вокруг него элемент <li>. Таким образом, вы можете сделать no.wrap('<li></li>').parent(), чтобы обернуть его и вернуть элемент <li>.

Answer 3

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

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

Несколько элементов могут быть добавлены одновременно, просто передавая их все как отдельные параметры для добавления ().

var wrapper = $('<div/>', {
  id: 'links'
});

$(wrapper).append(

  $('<ul/>').append(

    $('<li/>').append(
      $('<a/>', {
        href: '#',
        text: 'Yes'
      })
    ),

    $('<li/>').append(
      //you can even keep going! 
      $('<a/>', {
        href: '#',
        text: 'No'
      })
    ),

    $('<li/>').append(
      $('<a/>', {
        href: '#',
        text: 'Maybe'
      })
    )
  )

);