jQuery DOM Manipulations and jQuery Methods

jQuery | DOM Manipulations: Learn what is DOM, what is DOM manipulation, and jQuery methods.
Submitted by Pratishtha Saxena, on September 26, 2022

What is DOM?

DOM stands for Document Object Model. It is the interface for the HTML and XML documents. It gives a hierarchal structure to the webpage for better understanding. It helps to manipulate the different elements present on the page. It can be understood as an API through which the HTML and XML documents can be accessed. JavaScript uses this DOM to interact with the HTML-CSS of the webpage.

What is DOM Manipulation?

Manipulating the HTML and CSS of the webpage using JavaScript or jQuery can be achieved through Document Object Model (DOM). These manipulations can be anything like changes in IDs, values, names, attributes, etc. of an element. It not only manipulates but through DOM we can also create or remove other elements as needed. Using jQuery, we can add elements as child elements, add parent elements, replace the existing element with some other, extract the content of an element, etc.

jQuery DOM Manipulation Methods

There are a lot of jQuery methods using which we can achieve these tasks. Using jQuery, we do not need to write big codes and functions to change or create elements on the web page. There are easy and simple approaches to many things. Some of the jQuery methods are listed below.

jQuery html() jQuery val() jQuery text()
jQuery css() jQuery before() jQuery prepend()
jQuery after() jQuery insertAfter() jQuery append()
jQuery appendTo() jQuery clone() jQuery remove()
jQuery empty() jQuery detach() jQuery scrollTop()
jQuery attr() jQuery prop() jQuery offset()
jQuery position() jQuery addClass() jQuery hasClass()
jQuery toggleClass() jQuery width() jQuery height()
jQuery innerWidth() jQuery innerHeight() jQuery outerWidth()
jQuery outerHeight() jQuery wrap() jQuery wrapInner()
jQuery wrapAll() jQuery unwrap() jQuery removeProp()
jQuery removeClass() jQuery removeAttr() jQuery insertBefore()
jQuery offsetParent() jQuery scrollLeft() jQuery replaceWith()
jQuery replaceAll() jQuery bind() jQuery blur()
jQuery click() jQuery focus() jQuery unbind()
jQuery keypress() jQuery keydown() jQuery submit()
jQuery change() jQuery select() jQuery hover()
jQuery mousedown() jQuery mouseleave() jQuery mouseenter()
jQuery keyup() jQuery unload() jQuery load()
jQuery mouseout() jQuery mouseover() jQuery mouseup()
jQuery focusout() jQuery focusin() jQuery die()
jQuery dblclick() jQuery delegate() jQuery error()
jQuery off() jQuery on() jQuery scroll()
jQuery resize() jQuery ready() jQuery mousemove()
jQuery undelegate() jQuery trigger() jQuery triggerHandler()

jQuery Event Properties

jQuery event.data jQuery event.delegateTarget
jQuery event.currentTarget jQuery event.pageX
jQuery event.pageY jQuery event.namespace
jQuery event.relatedTarget jQuery event.target
jQuery event.result jQuery event.which
jQuery event.type jQuery event.timestamp
jQuery event.isPropagationStopped() jQuery event.isImmediatePropagationStopped()
jQuery event.stopImmediatePropagation() jQuery event.preventDefault()
jQuery event.isDefaultPrevented() jQuery event.stopPropagation()

All jQuery Examples

Comments and Discussions!

Load comments ↻

Copyright © 2024 www.includehelp.com. All rights reserved.