jQuery DOM Manipulation - Rakesh Kamble's Blog

DOM Manipulation with jQuery

Hey, what’s up, my peeps? Today we’re talking about DOM manipulation with jQuery.

Now, I know some of y’all might be thinking, “What the heck is a DOM?” Well, don’t worry, I gotchu.

DOM stands for Document Object Model, which is just a fancy way of saying the structure of a web page.

The DOM is made up of elements like divs, buttons, and images, and jQuery makes it easy to select and modify those elements.

So, let’s say you wanna change the text of a button on your web page. With jQuery, you can do it like this:

$('button').text('Click me, fam!');

This will select all the button elements on your page and change their text to “Click me, fam!”

But what if you wanna add a new element to your page? Easy peasy, lemon squeezy.

You can use the “append” method to add a new element to the end of an existing one. Like this:

$('.container').append('<div class="new-element">Yo, what up, world?</div>');

This will add a new div element with the class “new-element” to the end of the element with the class “container”.

But that’s not all! You can also change the attributes of an element, like its color, size, or background image. Here’s an example:

$('.my-element').css({
  'color': 'purple',
  'font-size': '24px',
  'background-image': 'url("https://media.giphy.com/media/3o6ZsWwV7pSvjyL1xC/giphy.gif")'
});

This will select the element with the class “my-element” and change its color to purple, font size to 24 pixels, and background image to a cool gif.