jQuery Methods: append()
jQuery: A Brief Introduction
jQuery is a JavaScript library that allows developers to manipulate the DOM, write event handlers, animations, and AJAX requests with just a few lines of code. This is possible with selectors and methods unique to the jQuery API. One of these methods is
append()
.
What is jQuery append()?
The
append()
method is able to take one or multiple arguments of “content” (which can be an HTML string, text, an array, an element, or more jQuery), and attach or “append” it to the end of any or all elements matching the selector. Some common uses include adding an item to the end of a list (such as a new “to do” item in a to do list), or displaying new content at the click of a button. Now let’s take a look at how
append()
works with some example code.
How to Use jQuery append()
Taking the above example of inserting items into a to do list, we will see how
append()
is called on a selector and inserts the content to all of the matching selections.
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
Starting with our HTML that builds a basic to do list:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h2>To Do List</h2> <ol class="list1"> <li>Read Chapters 1 & 2 </li> <li>Meeting at 3:00pm</li> <li>Write about yesterday's reading</li> </ol> </body> </html>
It’s important to note to include an address to the jQuery API inside a
<script>
tag in the
<head>
of the HTML page. Otherwise, we don’t get to use jQuery in our HTML page.
Now, our to do list renders beautifully!
We are feeling productive today, so let’s add an item to the end of the list. What about dinner plans?
Referencing our HTML layout, we see the ordered list (
<ol>
) has a class of
list1
. This is great news because we can select that entire selection by adding another
<script>
tag to the bottom of the <body>:
<script>
$(document).ready( () => {
$(".list1").append("<li>Make dinner plans</li>")
})
</script>
Inside of the
<script>
tag, we have some $ symbols. What are these? These are the powerful jQuery selectors.
We can select anything in our DOM by passing in an element, class name, or id name to name a few. In this case, we have selected anything with a class of
list1,
which will select the entire
<ol>
element. The above
(document)
selector selects the entire page and calls the
ready()
method to wait to call the next line of code until the page has fully loaded. This helps to keep our code running sequentially.
Now, inside of our
ready()
callback function, we have selected all elements with a class of
list1.
In this case, this will select our
<ol>
and insert the
<li>
passed to
append()
just above our closing
</ol>
. So, after our page loads, the
Make dinner plans
list item will be appended to our to do list:
Fantastic! Now let’s take a look at another example. This time let’s display more content once a button is clicked.
jQuery append(): A Real-World Example
Suppose we have a button on our web page and we want to display new content when the button is clicked. It would be efficient and more gratifying for our users if we displayed the new content without a page refresh or redirect.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Herein lies the power and elegance of
jQuery
: we can display new content without a refresh or redirect when the button is clicked.
Given this base HTML:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="content"> <p>Hello World!</p> </div> <button id="btn-main">Click Me!</button> </body> </html>
Pretty similar to how we started our to do list except we have a button:
Let’s use what we’ve learned about jQuery to append more content under “Hello World!” once the button is clicked.
<script>
$(document).ready( () => {
$("#main-btn").click( () => {
$("p").append("<b>Goodbye</b>")
})
})
</script>
Once again, we have included a <script> tag at the end of our <body>. Like our to do list example, we are waiting for the document to finish loading before doing anything else.
Once the document is loaded, we are now able to click the button and call the
click()
method on our button. Now our
<p>
tag is selected and we call the
append()
method with the argument content of the HTML string
”
<b>Goodbye</b>."
This will insert the word
Goodbye
in bold at the end of the
<p>
tag.
Our final output will look like this:
<div class="content"> <p>Hello World.</p><b>Goodbye</b>. </div> <button id="btn-main">Click Me</button>
And on screen like this:
Or if we wanted to append
Goodbye
to the end of the
<div>
, we just change the
<p>
selector to the class
content
:
<script>
$(document).ready( () => {
$("#main-btn").click( () => {
$(".content").append("<b>Goodbye</b>")
})
})
</script>
Which displays as:
Conclusion
In summary, we have seen how the
append()
method works on its own and in the context of a series of callback functions.
By simply including the jQuery selectors and methods inside of a
<script>
tag, we are able to append different types of content to the end of any elements that match our jQuery selector. The
append()
method opens a world of possibilities to display content to the user at specific times without a redirect or refresh.
