发表新帖
发表新帖

How do I assemble a
    using jQuery append()?

后端 未结
关注
5 1371
谎友^
谎友^ 2020-12-29 20:17

I\'m trying to use the append function and encountered this:

$(\"#details\").append(\'
    \');
for (var i = 0; i < 10; i++) {
    $(\"#details\").ap
相关标签:
5条回答
  • 轮回少年
    2020-12-29 21:00

    No, it's a programmer bug. <li>s are attached to their <ul> or <ol>, not to its container. And appending a close tag is nonsensical.

    You're basically working as if what you were appending were raw HTML, and it's not; you're actually working with the DOM.

    Try this:

    var list = $("#details").append('<ul></ul>').find('ul');
for (var i = 0; i < 10; i++)
    list.append('<li>something</li>');

    Note: please see (and upvote) Blixt's answer, which expands on a couple different options that are superior for various purposes. It deserves attention and hasn't been getting it.

    0 讨论(0)
  • 不思量自难忘°
    2020-12-29 21:03

    I would use something like if you have the data in an Array.

    var appendToUl = array.join("

  • + array+
    • ");

    It is much faster

0 讨论(0)
  • 自闭症患者
    2020-12-29 21:04

    I think there's a problem in your loop

    for (var i = - i < 10; i++)
    $("#details").append('<li>something</li>');

    should be I think

    for (var i = 0; i < 10; i++)
    $("#details ul").append('<li>something</li>');

    and lose the following from the end

    $("#details").append('</ul>');

    Working Demo

    EDIT:

    Based on George IV's comment, in order to avoid appending <li> elements to any <ul> that may be a child of the element with id "details", simply give the <ul> element an id when you append it- 

    $("#details").append('<ul id="appended">');

for (var i = 0; i < 10; i++)
    $("#appended").append('<li>something</li>');

    you may also find this article interesting - 43,439 reasons to use append() correctly

    0 讨论(0)
  • 臣服心动
    2020-12-29 21:07

    For a small static list, I prefer to unroll into a single expression.

    $('#details')
   .append($('<ul/>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
      .append('<li>something</li>')
   );
    0 讨论(0)
  • 遥遥无期
    2020-12-29 21:16

    Nope, you can't use it like that. append is an atomic operation, which creates the element directly.

    // The <ul> element is added to #details, then it is selected and the jQuery
// selection is put in the "list" variable.
var list = $('<ul/>').appendTo('#details');
for (var i = 0; i < 10; i++) {
    // New <li> elements are created here and added to the <ul> element.
    list.append('<li>something</li>');
}

    Alternatively, generate the HTML and add it all at once (this will be more similar to your original code):

    var html = '<ul>';
for (var i = 0; i < 10; i++) {
    html += '<li>something</li>';
}
html += '</ul>';
$('#details').append(html);

    This code is noticeably faster when dealing with many elements.

    If you need a reference to the list, just do the following instead of $('#details').append(html);:

    var list = $(html).appendTo('#details');
    0 讨论(0)
    •  看不清?
    提交回复
    热议问题