기존의 정렬되지 않은 목록에 목록 항목을 추가하는 방법은 무엇입니까?

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

<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="https://stackoverflow.com/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")
)));    

따옴표로 싸울 필요는 없지만 중괄호를 추적해야합니다 :)

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

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

".after ()"는 일치하는 요소 세트의 각 요소 다음에 매개 변수로 지정된 컨텐츠를 삽입 할 수 있습니다.

단순히 텍스트를 추가하는 li경우 다음을 사용할 수 있습니다.

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

이 경우 jQuery에는 다음과 같은 옵션이 제공되어 사용자의 요구를 충족시킬 수 있습니다.

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

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

prependdiv선택기에 지정된 상위의 맨 위 / 시작에 요소를 추가하는 데 사용됩니다 .

$('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="https://stackoverflow.com/user/messages"><span class="tab">Message Center</span></a></li>');

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

대신에

$("#header ul li:last")

시험

$("#header ul")

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

$("#content ul").append('<li><a href="https://stackoverflow.com/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);

행복한 코딩 :)

이것이 가장 짧은 방법입니다.

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

배열의 어디에 블록. 배열을 반복해야합니다.

이것은 또 하나입니다

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

쉬운

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