jQuery for HTML DOM Elements

jQuery for HTML DOM Elements

HTML DOM elements are according to web standards for accessing data from HTML over the web. It’s a W3C Document object Model for programs to access data, style and attributes of the elements.

Previously we discussed the Java-Script DOM elements for tables

Today we will see some other attributes of html that can be accessed in jQuery to create update and delete them. JQuery comes with a wide range of DOM objects and functions so that we can easily access the data on the web page. Before getting started with JQuery DOM you must have basic knowledge of JQuery

The main two jQuery methods for DOM manipulation are:

html() and val() and their JavaScript equivalents are innerHTML and value. The main difference is that in JavaScript, they are attributes of the document class and in jQuery they are functions or methods of jQuery class.

Another text() method is also there which is specifically for the content inside the element. The text() in jQuery is equal to innerHTML and html() function which returns the plain html inside an element. The val() as the name returns the value of the text field or some input field.


text() :

In case of getting the content: $(selector).text();

In Case of setting the content: $(selector).text(“content “);

html() :

In case of getting the html: $(selector).html();

In Case of setting the html: $(selector).html(“html “);


val() :

In case of getting the value: $(selector).val();

In Case of setting the value: $(selector).val(“value “);



Setting a new value in an input field:

Getting value from input field:

Getting the content of an element:

Getting HTML of an element:

Setting the HTML of an object:

Setting Content of an object using text():

Attributes manipulation using JQuery methods:

Using attr() function in jquery we can get and set the attributes of html elements.


For getting attribute value:

$(selector).attr (attribute name);

For setting attribute value:

$(selector).attr (“attribute name”, “attribute value”);

For setting multiple attribute at once:

$(selector).attr (“attribute name” : “attribute value” , “attribute name” : “attribute value” );


Learn advanced jQuery DOM functions