복붙노트

[JQUERY] 어떻게 기존의 정렬되지 않은 목록에 목록 항목을 추가하는 방법?

JQUERY

어떻게 기존의 정렬되지 않은 목록에 목록 항목을 추가하는 방법?

해결법


  1. 1.이 그것을 할 것입니다 :

    이 그것을 할 것입니다 :

    $("#header ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
    

    두가지:


  2. 2.당신은 더 '개체의 방법'여전히 읽기 쉬운 또한 그것을 할 수 있습니다 :

    당신은 더 '개체의 방법'여전히 읽기 쉬운 또한 그것을 할 수 있습니다 :

    $('#content ul').append(
        $('<li>').append(
            $('<a>').attr('href','/user/messages').append(
                $('<span>').attr('class', 'tab').append("Message center")
    )));    
    

    그런 다음 따옴표와 함께 싸울 필요는 없지만, 중괄호의 추적을 유지해야합니다 :)


  3. 3.어떻게 대신 '추가 "의"후 "사용에 대한.

    어떻게 대신 '추가 "의"후 "사용에 대한.

    $("#content ul li:last").after('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
    

    "후론 ()"정합 소자들의 세트의 각 요소 후 매개 변수에 의해 지정된 콘텐츠를 삽입 할 수있다.


  4. 4.당신은 단순히 리튬에 텍스트를 추가하는 경우, 당신은 사용할 수 있습니다 :

    당신은 단순히 리튬에 텍스트를 추가하는 경우, 당신은 사용할 수 있습니다 :

     $("#ul").append($("<li>").text("Some Text."));
    

  5. 5.jQuery를이 경우에 당신의 필요를 충족 할 수있는 다음과 같은 옵션이 포함되어 있습니다 :

    jQuery를이 경우에 당신의 필요를 충족 할 수있는 다음과 같은 옵션이 포함되어 있습니다 :

    APPEND 선택기에 지정된 부모 DIV의 끝에 요소를 추가하는 데 사용됩니다 :

    $('ul.tabs').append('<li>An element</li>');
    

    앞에 추가가 상단에 요소를 추가하는 데 사용됩니다 / 선택기에 지정된 부모 DIV의 시작 :

    $('ul.tabs').prepend('<li>An element</li>');
    

    insertafter 속성은 요소가 지정한 후 옆에 선택의 요소를 삽입 할 수 있습니다. 귀하의 생성 요소는 다음 지정된 선택 닫는 태그 후 DOM에 넣어 될 것입니다 :

    $('<li>An element</li>').insertAfter('ul.tabs>li:last');
    will result in:
    <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    <li>An element</li>
    

    에 insertbefore 위의 반대를 할 것입니다 :

    $('<li>An element</li>').insertBefore('ul.tabs>li:last');
    will result in:
    <li>An element</li>
    <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    

  6. 6.당신은 용기가 아니라 마지막 요소에 추가한다 :

    당신은 용기가 아니라 마지막 요소에 추가한다 :

    $("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
    

    가끔 사람들을 혼란 때문에 APPEND () 함수는 아마 jQuery를에 추가 ()가 호출해야했습니다. 당신은 실제로 요소에 추가하면서, 지정된 요소 이후에 뭔가를 추가 생각합니다.


  7. 7.대신에

    대신에

    $("#header ul li:last")
    

    시험

    $("#header ul")
    

  8. 8.

    $("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
    

  9. 9.

    $("#content ul").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
    

    여기에 코드 가독성 (블로그에 대한 뻔뻔한 플러그)에 대한 몇 가지 피드백이다. http://coderob.wordpress.com/2012/02/02/code-readability

    그것은 다음과 같이 보일 것입니다 .. 당신의 UL에 추가의 작용에서 새로운 요소의 선언을 분리 고려 :

    var tabSpan = $('<span/>', {
        html: 'Message Center'
    });
    var messageCenterAnchor = $('<a/>', {
        href='/user/messages',
        html: tabSpan
    });
    var newListItem = $('<li/>', {
        html: messageCenterAnchor,
        "id": "myIDGoesHere"
    });    // NOTE: you have to put quotes around "id" for IE..
    
    $("content ul").append(newListItem);
    

    행복 : 코딩


  10. 10.이것은 당신이 그렇게 할 수있는 가장 짧은 방법입니다

    이것은 당신이 그렇게 할 수있는 가장 짧은 방법입니다

    list.push($('<li>', {text: blocks[i] }));
    $('ul').append(list);
    

    어디 배열 블록. 당신은 배열을 통해 루프가 필요합니다.


  11. 11.이것은 또 다른 하나입니다

    이것은 또 다른 하나입니다

    $("#header ul li").last().html('<li> Menu 5 </li>');
    

  12. 12.쉬운

    쉬운

    // Creating and adding an element to the page at the same time.
    $( "ul" ).append( "<li>list item</li>" );
    

  13. 13.그냥이 스레드에 추가 - 당신이 복제 여부를 당신이에 복제하고 참 / 거짓의를 사용해야합니다 기존 항목을 이동하는 경우 / 깊은 복제뿐만 아니라 이벤트 (https://api.jquery.com/clone/ ).

    그냥이 스레드에 추가 - 당신이 복제 여부를 당신이에 복제하고 참 / 거짓의를 사용해야합니다 기존 항목을 이동하는 경우 / 깊은 복제뿐만 아니라 이벤트 (https://api.jquery.com/clone/ ).

    예: $ ( "# 콘텐츠 UL") APPEND ($ () 클론 (사실) 'existing_li.'.).;

  14. from https://stackoverflow.com/questions/1145208/how-to-add-a-list-item-to-an-existing-unordered-list by cc-by-sa and MIT license