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

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

다음과 같은 코드가 있습니다.

<div id="header">
    <ul class="tabs">
        <li><a href="/user/view"><span class="tab">Profile</span></a></li>
        <li><a href="/user/edit"><span class="tab">Edit</span></a></li>
    </ul>
</div>

jQuery를 사용하여 목록에 다음을 추가하고 싶습니다.

<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>

시도해 봤습니다.

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

하지만 그것은 새로운 것을 추가합니다.li 최후의 순간에li(마감 태그 바로 앞), 다음이 아닙니다.이것을 추가하는 가장 좋은 방법은 무엇입니까?li?

이렇게 하면 됩니다.

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

두 가지:

• 다음을 추가할 수 있습니다.<li>에게<ul>그 자체로
• HTML에서 사용하는 것과 반대 형식의 따옴표를 사용해야 합니다. 따라서 속성에서 큰따옴표를 사용하고 있으므로 코드를 작은따옴표로 둘러싸십시오.

또한 보다 '객체'적이고 읽기 쉬운 방법으로 이 작업을 수행할 수 있습니다.

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

그때는 인용문으로 싸울 필요는 없지만, 교정기의 흔적은 꼭 간직해야 합니다 :)

단순히 텍스트를 추가하는 경우li사용할 수 있는 항목:

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

"append" 대신 "after"를 사용하는 것은 어떻습니까?

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

".after"는 일치하는 요소 집합의 각 요소 뒤에 매개 변수로 지정된 내용을 삽입할 수 있습니다.

jQuery에는 다음과 같은 옵션이 함께 제공되어 이 경우 필요한 사항을 충족할 수 있습니다.

append부모 끝에 요소를 추가하는 데 사용됩니다.div선택기에 지정됨:

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

prepend상위 항목의 맨 위/시작에 요소를 추가하는 데 사용됩니다.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>

마지막 요소가 아닌 컨테이너에 추가해야 합니다.

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

append() 함수는 때때로 사람들을 혼란스럽게 하기 때문에 jQuery에서 add()라고 불렀어야 합니다.주어진 요소 뒤에 무언가를 추가하고 실제로 요소에 추가한다고 생각할 수 있습니다.

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

대신에

$("#header ul li:last")

해라

$("#header ul")

사용:

$("#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);

사용:

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

이렇게 하는 것이 가장 빠른 방법입니다.

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

어디에blocks배열입니다.그리고 배열을 반복해야 합니다.

이것은 다른 것입니다.

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

이 스레드에 추가하기 위해 - 기존 항목을 이동하는 경우 사용해야 합니다.clone이벤트 복제/딥 복제 여부에 대한 true/false(https://api.jquery.com/clone/) )도 확인할 수 있습니다.

예:$("#content ul").append($('.existing_li').clone(true));

더하다liuljquery의 prepend() 함수를 사용한 첫 번째 항목으로

$("ul").prepend("<li>first item</li>");

더하다liuljquery의 append() 기능을 사용한 마지막 항목으로

$("ul").append("<li>last item</li>");

언급URL : https://stackoverflow.com/questions/1145208/how-to-add-a-list-item-to-an-existing-unordered-list