Code has been added to clipboard!

Use jQuery .prependTo() to Add HTML Content to Elements

Reading time 1 min
Published Jan 22, 2018
Updated Oct 1, 2019

jQuery prependTo: Main Tips

  • The jQuery .prependTo() adds HTML content to the beginning of selected elements.
  • The prependTo jQuery is different from .prepend() due to syntax rules: the new content precedes the function. Keep that in mind when using the chaining functionality.

Usage of .prependTo() Explained

The .prependTo() method makes jQuery insert HTML content at the beginning of the selected target. The following example adds a blockquote to the <p> element:

Example
$("button").click(() => {
    $("<blockquote>Hello World</blockquote>").prependTo("p");
});

Follow these syntax rules for the .prependTo() jQuery method:

$(content).prependTo(target);

  • content specifies the HTML content to insert to the selected elements.
  • target defines a target to which HTML elements will receive new content. You may either insert a selector here, or define the exact target (an HTML string, a jQuery object, a single element or an array).
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