Создание вложенных элементов в 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

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

Answer 2

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

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

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

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