Appending in Javascript via Jquery

append /əˈpɛnd/ — to add something to the end of a written document.

For example, If you have HTML like:

<div class=“name”>
</div>

and you want to add a name to this div, but you also want to avoid hardcording it directly to the HTML, you could easily insert it to the end of the element using Javascript. Appending in Javascript is a way to insert content to the end of already existing elements. To append in Javascript, we use the Jquery function append().

With the append() function, we can either:

• append content: this content could be an HTML String, DOM element, text node, or Jquery object
• or we can append a function: this function could return the type HTML string, DOM element, text node, or jQuery object.

But for this lesson we’d be focusing on appending content, and not functions. Appending content is done through Jquery with the following format:

$(selector).append(content);

(NB: Jquery is simply a Javascript library that helps make it easier to perform certain tasks in Javascript. It makes it easier for us to work through our HTML documents. It also helps make manipulation, event handling, and animation easier, using an API that works across multiple browsers.)

When we use the append() function, the content we’re appending is added to the end of the already existing element. If we want to add the content to the beginning of the element, then we use the prepend() function. The prepend() function and the prependTo() function perform the same task. This is just like append() function and the appendTo() function. But they are syntatically different. Here’s how:

append() appends the parameter you’re working on to the object you’re working on e.g.

$(Append_To_This).append(The_Content_Given_Here);

while appendTo() appends the object you’re working on to the parameter you’re working on e.g.

$(The_Content_Given_Here).appendTo(Append_To_This);

Enough of theory. I’m sure by now, we have a good idea of what the append() function does. Now let’s see how to use it. I’m going to use the prior example of adding an actual name to a div. In my index.html file, I have this:

<div class=“name”>
</div>

I’m going to append a name to the end of this class “name” This is how simple it is. In my app.js file, I have this:

$(".name").append("Afopefoluwa Ojo");

Here’s a video tutorial that I made so that you can see it in action and follow along! You have to add your jquery library in this tutorial and set it up really well and good.

PS: It is important to note that selector could either be an id or a class, but either way, the proper format is to put it in quotation marks e.g. ".name"

I forgot to put mine in quotation marks in the video tutorial and so that took me quite a while to realise, as well as all the other cool bugs (and oversights). Lmao.

Tutorial video by yours truly.

Subscribe

Devcenter is a community-driven network of verified Software Developers and Designers in Africa.

We bring you all the latest happenings in the developer ecosystem in Africa, right into your email box.