jQuery getting and setting html elements

HI, today we are going to learn about getting and setting the content and attributes of  html elements, the jQuery providing bunch of methods related to DOM that make it easy to access and manipulate the html attributes and elements in document. this is very useful and regular methods were people use, these methods are .text(), .html(), and .val()

To get the content from html elements we use .text() and .html()

the bellow .text() method example gives the content of div and it will not give html elements

<div><b>this is text</b></div>

$('#div').text();


the bellow .html() method example gives the content of div along with html elements

<div><b>this is text</b></div>

$('#div').html();

the bellow .val() method example gives the value of html form elements

<input value='lessoncup'>

$('input').val();


To get the attributes of html elements we use .attr()

the bellow .attr() method example gives the values of  html elements

<div class="lessoncup">

$('div').attr('class');


we can also use these method to set the content to html elements


To assign a text to the div

the bellow .text() method example adds the text to the selected element.

<div id="lessoncup">

$('#lessoncup').text('hi i am lessoncup');


To assign a text with html element to the div

the bellow .html() method example adds the text to the selected element.

<div id="lessoncup">

$('#lessoncup').html('<b>hi i am lessoncup</b>');


To assign a attribute to selected html element

the bellow .attr() method example adds the class attribute to the selected element.

<div id="lessoncup">

$('#lessoncup').attr('class','programming blog');


adding multiple attributes to selected html element

the bellow .attr() method example adds the multiple attributes to the selected element.

<div>

$('#lessoncup').attr({
     "id" : "lessoncup",
    "class" : "programming blog",
       "width" : "500px"
});