How to get the element type JQuery and print it

Posted on

This is an article which is written and it is used for describing or explaining on how to get the element type of an already declared or defined HTML element in the web page using JQuery. After retrieving the element type it will be printed or presented in form of pop-up window. It is very simple for getting or retrieving the type of an already declared or defined in a HTML web-page. Below is an example which can be used to perform the scenario or to aim the purpose of getting or retrieving the element type of the already declared or defined HTML element :

$("#list_selectable_dbms").click('li',function() {

       var element_type = $(this).prop('nodeName');

       alert(element_type);

});

The above is an example of detecting a click event happened in a list item located in an unordered list with the id of ‘list_selectable_dbms’.

The element which is going to be retrieved its type is pointed out by a variable named ‘$(this)’. But it is needed to be specifically called out a method which is meant to print the element’s type. If it is not, then if it is printed just as shown below¬† :

alert($this);

The image of the executable alert above will be shown in the image as follows :

 

The main point for extracting or retrieving the element type of an already or script :

$(this).prop('nodeName');

The part of ‘$(this)’ is actually referring to the HTML element clicked. But in the alert part, the popped-up window printed ‘<UL>’ as the HTML element type. It is shown as the following image :

How to get the element type JQuery and print it
How to get the element type JQuery and print it

It is actually can be referred into the inner element which exist inside the unordered list if the snippet code defined is correct. How can the element which in this context a list item can be retrieved ?. It can be done by defining and modifying the snippet code into the following lines of code :

$("#list_selectable_dbms").click('li',function(e) { 
      var element_type = $(e.target).prop('nodeName'); 

      alert(element_type); 

});

In the above snippet code, if it is being executed, the output will be generating the following pop-up image :

How to get the element type JQuery and print it
How to get the element type JQuery and print it

It is because the click event gets the clicked target as a list item. So, when the list item’s type is being extracted of course the element type shown in the alert which is displayed in form of pop-up window is a LI or List Item.

Leave a Reply