Code has been added to clipboard!

All the Methods of Using jQuery Add Element Functionality Explained

Reading time 3 min
Published Dec 20, 2017
Updated Oct 1, 2019

In this chapter, we will be covering methods used to add jQuery content. After you grasp their key differences, learning will be a breeze. You will learn how to make jQuery add child to a parent element and perform other similar additions.

jQuery Add Element: Main Tips

  • jQuery has useful methods and selectors which allow you to manipulate DOM more conveniently than by simply using JavaScript.
  • Using jQuery methods, you can add elements and content both inside and outside HTML tags of the elements.
  • To make jQuery add child to an element, use .prepend() for the first child and .append() for the last.

Available Methods

There are four methods that are used to add jQuery content:

  • .append() - insert content at the end of selected element (inside its HTML tags)
  • .prepend() - insert content at the start of selected element (inside its HTML tags)
  • .after() - insert content after the selected element (outside its HTML tags)
  • .before() - insert content before the selected element (outside its HTML tags)

.append() or .prepend()

The .append() and .prepend() methods both follow this simple syntax:

$(selector).append | prepend(htmlContent, [htmlContent])

htmlContent can be a string, but it can also be a variable, and you can add as many of them as needed (separated by commas). This allows several elements to be added using a single .append() or .prepend() statement:

Example
$("#btn1").click(() => {
    $("p").prepend("<strong>Added to the front</strong>. ");
});
$("#btn2").click(() => {
    $("ol").prepend("<li>Added to the top</li>");
});
$("#btn3").click(() => {
    $("p").append(" <strong>Added to the back</strong>.");
});
$("#btn4").click(() => {
    $("ol").append("<li>Added to the back</li>");
});

.after() and .before()

The .after() and .before() methods place new content outside the tags of the selected element. Both of them follow syntax similar to the append and prepend statements:

$(selector).after | before(htmlContent, [htmlContent])

These methods can be used to add multiple elements as well. However, unlike in the previous example, if you were to select the <body> element, the newly added elements wouldn't appear anywhere since they would end up outside of the body of the web page:

Example
$("#btn1").click(() => {
   $("img").before("<strong>This text is on the left side</strong>");
});
$("#btn2").click(() => {
   $("img").after("<strong>This text is on the right side</strong>");
});

Note: If you need to make jQuery create elements to use first, don't forget to start with the document ready event.

jQuery Add Element: Summary

  • Among other ways to conveniently modify and understand DOM information, jQuery offers a handy functionality that lets you add content to HTML elements.
  • By applying .prepend() or .append(), you can make jQuery add child to an HTML DOM element.
  • You can use these methods to add jQuery, JavaScript, or HTML made elements both inside and outside of their tags.
Learn jQuery
Introduction
Selectors
Events
Event Methods
Download
Callback
Chaining
Get and Set
Add Element
Remove Element
Traverse
Parent
Children
Sibling Traverse
Filtering
jQuery AJAX
Effects
Show and Hide
Fade Effect
Slide Effect
Animate Effect
Manipulate CSS
Width and Height
.addClass()
.after()
.animate()
.append()
.appendTo()
.attr()
.before()
.bind() (deprecated)
.blur()
.change()
.click()
.clone()
.css()
.dblclick()
.delay()
.delegate() and .undelegate() (deprecated)
.detach()
.empty()
.end()
.error() (deprecated)
.fadeIn()
.fadeOut()
.fadeTo()
.fadeToggle()
.finish()
.focus()
.focusIn()
.focusOut()
.hasClass()
.height()
.hide()
.hover()
.html()
.innerHeight()
.innerWidth()
.insertAfter()
.insertBefore()
.keypress()
.keyup()
.live() and .die() (deprecated)
.load() (deprecated)
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()
.off()
.offset()
.offsetParent()
.on()
.one()
.outerHeight()
.outerWidth()
.position()
.prepend()
.prependTo()
.prop()
.proxy()
.queue()
.ready()
.remove()
.removeAttr()
.removeClass()
.removeProp()
.replaceAll()
.replaceWith()
.resize()
.scroll()
.scrollLeft()
.scrollTop()
.show()
.slideDown()
.slideToggle()
.slideUp()
.stop()
.submit()
.text()
.toggle()
.toggleClass()
.trigger()
.triggerHandler()
.unbind() (deprecated)
.unload() (deprecated)
.unwrap()
.val()
.width()
.wrap()
Event Properties
event.currentTarget
event.preventDefault()
event.relatedTarget
event.stopImmediatePropagation()
event.stopPropagation()
event.target
event.timeStamp
event.type
event.which
jQuery .find()
jQuery .keydown()
jQuery.noConflict()
pageY and pageX