jQuery | appendTo() with Examples
The appendTo() is an inbuilt method in jQuery that is used to insert HTML element at the end of the selected element.
Syntax:
$(content).appendTo(selector)
Here the element content specifies the content to be inserted.
Parameters: It accepts a parameters “selector” which specifies the elements to which content will be appended.
Return Value: It returns the modified selected element.
Code #1:
In the below code, id content with element “span” will be append to id “#hel” element.
< html > < head > < meta charset = "utf-8" > < style > #hel { background: lightgreen; display: block; border: 2px solid green; padding: 10px; width: 300px; } </ style > </ script > </ head > < body > < span >geeks Writer !!!</ span > < div id = "hel" >Hello- </ div > < script > $("span").appendTo("#hel"); </ script > </ body > </ html > |
Output:
Code #2:
In the below code, we are directly appending a “p” element using this method.
< html > < head > < meta charset = "utf-8" > < style > body{ display: block; width: 250px; height: 100px; border: 2px solid green; padding: 10px; } </ style > </ script > </ head > < body > < h2 >Greetings from gfg !</ h2 > < div class = "container" > < div class = "inner" > Hello </ div > </ div > < script > $( "< p >Everyone !!!</ p >").appendTo( ".inner" ); </ script > </ body > </ html > |
Output: