locked
What is difference between append and appendTo methods in jQuery? RRS feed

  • Question

  • User221424154 posted

    I still don't understand much about the difference between both. It seems there are performing the same functionality.

    Anyone can explain further with examples to this?

    Saturday, January 13, 2018 9:10 PM

All replies

  • User541108374 posted

    Hi,

    a quick google search for jquery append vs appendTo gave a bunch of hits and this one as first: https://stackoverflow.com/questions/13478372/jquery-append-vs-appendto.

    Taken from that answer:

    .append() inserts the content specified by the parameter, to the end of each element in the set of matched elements, as in

    $(Append_To_This).append(The_Content_Given_Here);

    while .appendTo() works the other way around, it insert every element in the set of matched elements to the end of the target given in the parameter, as in

    $(The_Content_Given_Here).appendTo(Append_To_This);

    Kris.

    Sunday, January 14, 2018 11:28 AM
  • User753101303 posted

    Hi,

    And have you tried the documentationg first?

    "With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container."

    From http://api.jquery.com/appendto/

    Aslo you see the signature is [content].appendTo(target) and [target].append(content)

    Sunday, January 14, 2018 12:25 PM
  • User-474980206 posted

    you need to understand jQuery chaining (often called fluent)  to see the difference. if you are building an object via a chain, it sometimes easy to append to another

    // simple append to
    
    $('<ul/>')
       .append('<li>hi</li>')
       .append('<li>by</li>')
       .appendTo('#div1');
    
    
    // just append
    
    var $ul = $('<ul/>')
             .append('<li>hi</li>')
             .append('<li>by</li>');
    $('#div1').append($ul);
    
    // just append with out extra variable
    
    $('#div1')
        .append(
           $('<ul/>')
             .append('<li>hi</li>')
             .append('<li>by</li>')
        );
    
    
    

    Sunday, January 14, 2018 10:21 PM
  • User-1838255255 posted

    Hi Manishamani,

    According to your description, as far as I know, the function are the same of append() and append to(). The difference is like the below code:

    // appendTo function 
    
    $(content).appendTo(selector); 
    
    // append function
    
    $(selector).append(content); 

    Test Sample Code: 

    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            $(function () {
                $("<li>tab3<li/>").appendTo($(".tabs"));
                $(".newtabs").append("<li>tab3<li/>");
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ul class="tabs">
                    <li>tab1</li>
                    <li>tab2</li>
                </ul>
    
                 <ul class="newtabs">
                    <li>tab1</li>
                    <li>tab2</li>
                </ul>
            </div>
        </form>
    </body>

    Best Regards,

    Eric Du 

    Monday, January 15, 2018 3:02 AM