Loading Please Wait...

Logo Lynxsia IT Solutions

jQuery HTML DOM Introduction

JQ DOM Introduction

jQuery contains powerful methods for changing and manipulating HTML elements and attributes.

jQuery DOM Manipulation

One very important part of jQuery is the possibility to manipulate the DOM.

jQuery comes with a bunch of DOM related methods that make it easy to access and manipulate elements and attributes.

DOM = Document Object Model

The DOM defines a standard for accessing HTML and XML documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM - Get Content

The following example demonstrates how to get content with the jQuery text() method:

					 
        
          let testPara = $("#test").text();
          alert("Content: " + testPara);
        
      
DOM - Get Attribute

The following example demonstrates how to get href attribute value with the jQuery attr() method:

					 
        
          let hrefAttr = $("#link").attr('href');
          alert("Content: " + hrefAttr);
        
      
DOM - Set Content

The following example demonstrates how to set content with the jQuery text() method:

					 
        
          $("#test").text('Changed Content');
        
      
DOM - Set Attribute

The following example demonstrates how to set href attribute value with the jQuery attr() method:

					 
        
          $("#link").attr('href', 'https://lynxsia.com/');
        
      
DOM - Add Element

The following example demonstrates how to add element with the jQuery after() method:

					 
        
          $("#test").after('<p>Added Paragraph</p>');
        
      
DOM - Remove Element

The following example demonstrates how to remove element with the jQuery remove() method:

					 
        
          $("#test").remove();
        
      

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved